"Ah, what tangled web's we weave, when first we practice to...mess with the menu's"
(apologies to Sir Walter Scott)
The menus remind me of the russian doll toy, layers inside layers inside layers. With
HTML Code:
div#menu1 {
margin-bottom:30px;
border:solid 3px #red;
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px
}
you set the border for the DIV 'Menu1', but what about the rest of the layers? If you add
HTML Code:
div#menu1 ul.rMenu {
border:solid 0px #blue !important;
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:30px
}
you will set the rounded borders for the UL that is in the DIV, but more is needed
HTML Code:
div#menu1 ul.rMenu li {
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px
}
set's it for the LI that's in the UL that is in the DIV, but yes, you still need more. Using
HTML Code:
div#menu1 ul.rMenu li a:link,div#menu1 ul.rMenu li a:hover,div#menu1 ul.rMenu li a:visited,div#menu1 ul.rMenu li a:active {
boxrder:solid 2px green !important;
padding:8px 35px;
background:#EEEEEE !important;
font-weight:bold;
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10pxx
}
will add the corners to the <A> that is in the <LI> that is in the <UL> that is in the <DIV>
(if you use this exactly, you will need to clean up the colors and maybe some other things, but this should get you going)
btw you could combine them all with
HTML Code:
div#menu1,
div#menu1 ul.rMenu,
div#menu1 ul.rMenu li,
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px;
}