Trying to select CSS3 elements in a nested <li> style menu - html

Question

I have an HTML structure like this:
<div id="nav">
<ul>
<li>Home</li>
<li>Services Offered</li>
<ul>
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
</ul>
<li>Areas We Service</li>
<li><a id="quote" style="cursor: pointer">Request A Quote</a></li>
</ul>
</div>
and CSS styles like this:
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
top: 100%;
position: absolute;
display: block;
background: black;
}
The CSS code isn’t allowing the HTML nested <ul> to become visible on hover. I can understand this being a problem if the <ul> is a parent of the preceding <li> but its not, is it? How can I get this working without JS/jQuery?
Thanks!

Answer 1

You have an invalid tag in your markup. ul cannot contain another ul it should be with in li. Apart from this i just fixed css removed top:100% and it looks this way. Not sure hw you wanted it.
Demo
Css
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
position: absolute; /* Change this to position:relative and your menu will appear beneath its parent.*/
display: block;
background: black;
}
MarkUp Fixed
<div id="nav">
<ul>
<li>Home
</li>
<li>Services Offered
<ul>
<li>Residential
</li>
<li>Commercial
</li>
<li>Industrial
</li>
</ul>
</li>
<li>Areas We Service
</li>
<li><a id="quote" style="cursor: pointer">Request A Quote</a>
</li>
</ul>
</div>

Answer 2

The problem is that the ul element is not contained within the li element that is being hovered over. Try moving the ul element within the 'hovered' li element.
Here's a jsfiddle I created; only moving the ul element to be contained within the li and adding position:relative; to the parent li element: http://jsfiddle.net/BQHyq/1/
If you have any feel questions feel free to make an inquiry - I'd be happy to help.

Answer 3

Try this
Demo(Didn't add a toggle menu header)
Updated Demo
#nav ul li ul {
display: none;
}
#nav ul li:nth-of-type(3):hover ul {
display: block;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Services Offered</li>
<li>Toggle Me
<ul>
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
</ul>
</li>
<li>Areas We Service</li>
<li><a id="quote" style="cursor: pointer">Request A Quote</a></li>
</ul>
</div>
Note: You are having an invalid markup, you cannot nest ul directly
as a child under another ul element, you need to nest another ul
under an li element.
Also note that am purposely using nth-of-type here to select the 3rd li because if you want to nest another list under another li and you don't want to toggle that, than nth-of-type will come in action, else you want to toggle each nested list than using the below piece of selector will work as well
Demo
#nav ul li:hover ul {
display: block;
}

Answer 4

I doubt that you didn't give position: relative; to the parent. And the main issue is, <UL> is not inside <LI>. So :hover will not be triggered. You need to move the UL inside the LI for this.
Why not think of doing something like this. Why not try with this HTML/CSS structure?
HTML
<ul class="nav">
<li>
Menu 1
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
</ul>
CSS
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */
Fiddle: http://jsfiddle.net/vMuxA/ (Vertical Menu) http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)