Thank you, this is what I wanted as well. But I have a horizontal menu that has 7 or more sub menus. The following code is working fine for the top, first and last but I would like the in between to have the same style as first.

.ux-menu-horizontal LI A.ux-menu-link-first,
.ux-menu-sub LI A.ux-menu-link-first
{
-moz-border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
-o-border-radius: 0px 0px 0 0;
border-radius: 0px 0px 0 0;
border-style: solid !important;
border-width: 0px 3px 0px 3px;
}

.ux-menu-horizontal LI A.ux-menu-link-last,
.ux-menu-sub LI A.ux-menu-link-last
{
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
border-style: solid !important;
border-width: 0px 3px 3px 3px;
}

.ux-menu-horizontal LI A.ux-menu-link-first.ux-menu-link-last,
.ux-menu-sub LI A.ux-menu-link-first.ux-menu-link-last
{
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-o-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
border-width: 3px 3px 0px 3px;
}

UL.ux-menu LI.ux-menu-item-main {margin: 0 0px !important;}
UL.ux-menu LI {padding: 0 !important;margin: 0 !important;}
UL.ux-menu LI:before {display: none !important;}
#{$id} LI.ux-menu-item-level-0
{
width: 225px;
}
#{$id} LI.ux-menu-item-level-1
{
width: 225px;
}


Thank you.

Hello,

You can use "ux-menu-link" CSS class instead of "ux-menu-link-first" and "ux-menu-link-last" in CSS selectors.

Regards,
ARI Soft

Is it possible to have round corner in horizontal main menu??

Can you give me the code please??


Here is my code:

#{$id} LI.ux-menu-item-level-0
{
width: 100px;
}

.ux-menu-vertical LI A.ux-menu-link-first,
.ux-menu-sub LI A.ux-menu-link-first
{
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
border-style: none !important;
}

.ux-menu-vertical LI A.ux-menu-link-last,
.ux-menu-sub LI A.ux-menu-link-last
{
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
border-style: none !important;
}

.ux-menu-vertical LI A.ux-menu-link-first.ux-menu-link-last,
.ux-menu-sub LI A.ux-menu-link-first.ux-menu-link-last
{
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}

Everything is fine except I want Round corner in horizontal menu, and if it's possible only at left and right!!

Thank's!

Hello,

Add the following CSS rules:

LI.ux-menu-item-main>A.ux-menu-link-first
{
border-radius: 10px 0 0px 10px;
}

LI.ux-menu-item-main A.ux-menu-link-last
{
border-radius: 0 10px 10px 0;
}

Regards,
ARI Soft

It work's fine thank's a lot!!!

Another quick question!!!!

Is it possible to remove the ">" ???

Thank's