I have been playing with CSS3 trying to really understand it and I have not been able to get the behavior of the sub-menu navigation to be correct. Please see http://jsfiddle.net/jllcpp04/9Jpd6/7/ for a working example. The sub-menu still has the bullet points on it and it is not popping up to the right. This is part of a dynamic menu whose width will change depending upon what offices will appear (based on user profile). I would prefer not to set top/right/left/bottom for div location. I also cannot figure out why derivnav is not overriding the nested submenu.
My HTML Code:
<div class="main_nav">
<ul class="nav">
<li><a href="#">Home</a>
</li>
<li>
<div class="submenu"><a href="#" class="drop">Office</a>
<div class="subnav">
<h3>Near You</h3>
<ul>
<li>
<div class="deriv"><a href="#" class="dropr">New York</a>
<div class="derivnav">
<ul>
<li><a href="#">Upper West Side</a>
</li>
<li><a href="#">Upper East Side</a>
</li>
<li><a href="#">Lower West Side</a>
</li>
<li><a href="#">Wallstreet</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<h3>Not Near You</h3>
<ul>
<li><a href="#">chicago</a>
</li>
<li><a href="#">philadelphia</a>
</li>
<li><a href="#">san francisco</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
Component CSS:
@charset"utf-8";
/* CSS Document */
.main_nav {
width:56%;
text-align:center;
float:left;
display:inline-block;
}
.nav {
list-style:none;
height:43px;
white-space:nowrap;
margin: 0px auto 10px auto;
min-width:775px;
text-align:left;
}
.nav h3 {
font-size:14px;
margin:7px 0 14px 4px;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
.nav h4 {
font-size:12px;
margin:7px 0 14px 4px;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
.nav > li {
border:none;
text-transform:uppercase;
float:left;
position:relative;
margin:5px 3px 5px 2px;
padding:auto;
}
.nav li {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #333333;
outline:0;
text-decoration:none;
padding-left:10px;
}
.nav li:hover > a, .nav li:hover > p {
color:#cccc66;
}
.nav li .drop {
padding-right:15px;
background:url("drop-nonsel.png") no-repeat right 4px;
}
.nav li:hover .drop, .nav li .drop:hover {
background:url("drop-sel.png") no-repeat right 4px;
}
.nav .subnav {
float:left;
position:absolute;
text-align:left;
padding:5px;
margin: 5px 5px 5px 0;
border:1px solid #CCC;
border-top:none;
white-space:nowrap;
/* Gradient background */
background:#FFFFFF;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
opacity:0;
transition:visibility 0s linear 0.2s, opacity 0.2s linear;
visibility:hidden;
}
.nav .submenu:hover .subnav, .nav li .subnav:hover {
top:auto;
opacity:1;
visibility:visible;
}
.nav .subnav > ul {
padding:2px;
margin:0 0 12px 0;
}
.nav .subnav > li {
list-style:none;
border-bottom:thin;
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
}
.nav .subnav > li:last-chid {
border-bottom:none;
}
.deriv li .dropr {
padding-right:10px;
background:url("drop-right-nonsel.png") no-repeat right 6px;
}
.deriv li:hover .dropr, .deriv li .dropr:hover {
background:url("drop-right-sel.png") no-repeat right 6px;
}
.subnav .derivnav {
float:right;
position:absolute;
text-align:left;
right:-150px;
padding:5px;
margin: 5px 5px 5px 0;
border:1px solid #CCC;
border-left:none;
white-space:nowrap;
/* Gradient background */
background:#FFFFFF;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
opacity:0;
transition:visibility 0s linear 0.3s, opacity 0.3s linear;
visibility:hidden;
}
.subnav .derivnav > li {
list-style:none;
border-bottom:thin;
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
}
.subnav li .deriv:hover .derivnav, .subnav li .derivnav:hover {
top:auto;
opacity:1;
visibility:visible;
}
.derivnav ul {
padding:2px;
margin:0 0 12px 0;
}
.derivnav li {
list-style:none;
border-bottom:thin;
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
}
I have been playing with it for a few days and can't seem to figure it out. my CSS3 validates and my html code does as well. Any ideas?
Thanks! Jon
It worked for me when I removed the > marks from these two lines:
.nav .subnav > li {
.nav .subnav > li:last-chid {
.nav .subnav li {
.nav .subnav li:last-child {
The > in a CSS selector means that the selected element must be a direct child of the previous element, not just the nearest descendant. In your markup, .subnav is a div, not a ul. The li element simply wasn't selected before, so you're styles were never applied.
If you need the .subnav list styles to be completely separate from the .deriv styles, you could use the > operator like this:
.nav .subnav > ul > li {