You can use CSS3's border-radius property to apply round corners to hard edges of an element, such as to the four corners of each menu link within the menu. The following modifies the default CSS of the menu to do just that:
Code:
.submenu{display: none}
a.hiddenajaxlink{display: none}
.applemenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
}
.applemenu div.silverheader a{
background: black url(silvergradient.gif) repeat-x center left;
-moz-border-radius: 5px;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(silvergradientover.gif);
color: white;
}
.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}
Bookmarks