Can you provide a link to your site? It would make it much easier to help you with your question.
this is site i’m working on bcofjc.org
You are applying the border-radius to
#nav li li a, #nav li li a:link, #nav li li
Instead, you have to apply it to the ul element. Specifically, in your CSS that would be this declaration:
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0 0 0 0px;
padding: 0;
}
I add border radius to the above declaration but no change.
Is there a specific line it must be in. Meaning above margin or below or anywhere else in the declaration.
You are applying a background color to the submenu li element, and not declaring a background color to the #nav li ul element.
If you correct that, you will see your border-radius
I get the border radius but it is coming on each item list in the drop down menu. I just want it on the bottom left & right of last item in the list.
Bring it all together like this:
#nav li li a, #nav li li a:link, #nav li li a:visited {
color: #FFF;
display: block;
width: 158px;
font-size: 12px;
margin: 0;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #ef8300;
position: relative;
}
AND
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0 0 0 0px;
padding: 0;
background: #ef8300;
border-radius-bottomright: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-radius-bottomright: 4px;
border-radius-bottomleft: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomleft: 4px;
}
Still not getting my desired result.
I finally got it.
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #0b55a1;
color: #fff;
display: block;
width: 158px;
font-size: 12px;
margin: 0;
padding: 7px 14px 7px 14px;
border-top: 1px solid #0b55a1;
border-left: 1px solid #0b55a1;
border-right: 1px solid #0b55a1;
border-bottom: 4px solid #0b55a1;
position: relative;
}
#nav li ul {
z-index: 9999;
position: absolute;
display: block;
left: -999em;
height: auto;
width: 180px;
margin: 0 0 0 0px;
padding: 0px;
border-right: 1px solid #0b55a1;
border-top: 1px solid #0b55a1;
border-bottom: 4px solid #0b55a1;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
overflow: hidden;
-webkit-box-shadow:rgba(0, 0, 0, 0.298039) 0 0 6px;
}
