Thread: How to add rounded corners to top menu

I am currently trying to change the css look of my top menu. I want the top menu to have rounded corners, the sliding door technique with images. I need to have them wrap in a span. I am not sure how I would do this. The drop down menu is fine the way it is generated.

<ComponentArt:Menu id="PageMenu"
ClientScriptLocation="skins/componentart_webui_client/"
ImagesBaseUrl="skins/skin_1/skins/Skin_(!SKINID!)/images/mcf/"
ScrollingEnabled="true"
ScrollUpLookId="ScrollUpItemLook"
ScrollDownLookId="ScrollDownItemLook"
Orientation="horizontal"
CssClass="TopMenuGroup"
DefaultGroupCssClass="MenuGroup"
DefaultItemLookID="DefaultItemLook"
DefaultGroupItemSpacing="2"
ExpandDelay="0"
ExpandDuration="0"
ExpandSlide ="None"
ExpandTransition="None"
CascadeCollapse="false"
CollapseDelay="0"
CollapseSlide="None"
CollapseTransition="None"
EnableViewState="false"
runat="server">

<ItemLooks>
<ComponentArt:ItemLook LookId="DefaultItemLook" HoverCssClass="MenuItemHover" LabelPaddingTop="2px" ActiveCssClass="MenuItemDown" LabelPaddingRight="15px" LabelPaddingBottom="2px" ExpandedCssClass="MenuItemDown" LabelPaddingLeft="5px" CssClass="MenuItem" />
<ComponentArt:ItemLook LookId="TopItemLook" CssClass="TopMenuItem" HoverCssClass="TopMenuItemHover" LabelPaddingLeft="4" LabelPaddingRight="4" LabelPaddingTop="2" LabelPaddingBottom="2" />
<ComponentArt:ItemLook LookID="ScrollUpItemLook" ImageUrl="skins/Skin_(!SKINID!)/images/scroll_up.gif" ImageWidth="15" ImageHeight="13" CssClass="ScrollItem" HoverCssClass="ScrollItemH" ActiveCssClass="ScrollItemA" />
<ComponentArt:ItemLook LookID="ScrollDownItemLook" ImageUrl="skins/Skin_(!SKINID!)/images/scroll_down.gif" ImageWidth="15" ImageHeight="13" CssClass="ScrollItem" HoverCssClass="ScrollItemH" ActiveCssClass="ScrollItemA" />
<ComponentArt:ItemLook LookID="BreakItem" ImageUrl="skins/Skin_(!SKINID!)/images/break.gif" ImageHeight="1" ImageWidth="100%" />
</ItemLooks>
</ComponentArt:Menu></div>

Here is my original code.

CSS
.slidetabsmenu{
float:left;
width:100%;
font-size: 12px;
line-height:normal;
}

* html .slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

.slidetabsmenu ul{
list-style-type: none;
margin:0;
padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; float:right; margin-top:-25px; margin-bottom:10px
}

.slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}

.slidetabsmenu a{
float:left;
background:url(images/slide-left.gif) no-repeat left top;
margin:0;
margin-right: 5px;
padding:0 0 0 9px;
text-decoration:none;
}

.slidetabsmenu a span {
float:left;
display:block;
background:url(images/slide-right.gif) no-repeat right top;
padding:7px 13px 7px 4px;
font-weight:bold;
color:#fff;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
color: white;
}

.slidetabsmenu a:hover, .slidetabsmenu li.selected a{
background-position:0% -30px;
}

.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
background-position:100% -30px;
}

html>/**/body .IEonlybr{ /*None IE browsers hack*/
display: none; /*Hide BR tag in non IE browsers, since it's not needed*/
}





HTML>

<div id="slidemenu" class="slidetabsmenu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#" rel="dropmenu1_c"><span>Manufacturers</span></a></li>
<li><a href="#" rel="dropmenu2_c"><span>Customer Service</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>

<br style="clear: left;" />
<br class="IEonlybr" />


<div id="dropmenu1_c" class="dropmenudiv_c">
<a href="">Item List</a>
<a href="">Item List</a>
<a href="">Item List</a>
<a href="">Item List</a>

</div>

Thanks for the coding .... I really needed it !

Did you ever figure out how to make the corners rounded on the top nav menu?