Something is hidden for guests. Please login or register to see it.

I have 2 Ari-Soft menus on the same page (see above image). I would like to style the 2 menus differently. Under system parameters>generate unique ID>YES

I'm using the code below for the 2nd menu. Unfortunately, it changes the border for the 1st menu as well.

BODY UL#{$id} LI A
{
background: transparent url("/images/active_bg.png");
}
#{$id} A.ux-menu-link-level-0
{
background: transparent url("/images/fancy_bg.png");
}
.ux-menu A.ux-menu-link-level-0
{
border-style: none !important;
}

This is what I'm looking to do (see image).

1st menu (top) transparent background, #333 on hover/active, no borders
2nd menu (bottom) background image, hover/active image, right border image, full width OR centered menu

Your assistance is greatly appreciated! THANK YOU!

Hello,

The next CSS rule is applied to all menu instances:



Regards,
ARI Soft

Thanks for your quick response! But how do I center/full width the menu?

I found the solve in another thread.

DIV.ux-menu-container
{
left: 0;
text-align: center;
}

UL.ux-menu
{
display: inline-block;
*display: inline;
zoom: 1;
}

Thanks!!!! Still looking how to use an image for the left border or just a left border solid color.

Information about menu HTML layout and styles can be found here. It can be used to customize menu.

Regards,
ARI Soft