Display li child items on hover - html

Question

I have the following menu structure:
<li id="nav-menu-item-226" class="menu-item-has-children">
About Us
<ul class="sub-menu dropdown-menu menu-odd menu-depth-2">
<li class="sub-menu-item"><a href="...">...</li>
<li class="sub-menu-item"><a href="...">...</li>
</ul>
</li>
Unordered list has by default display: none.
What I need to get done is that whenever user hovers over parent page link, sub-menu would drop down.
In the best case, I would need to get it done with css only. I have tried many different snippets but none of them helped.

Answer 1

Give id to ul tag and give its style display:none.
then,
in your css
#id ul li:hover > ul { display:block }

Answer 2

This is how I would do it:
.sub-menu {
display:none;
}
.menu-item-has-children:hover > .sub-menu {
display:block;
}
Here is the JSFiddle demo

Answer 3

You could also get it work with jQuery to have a nice slideDown/slideUp effect.
jQuery:
;(function($){
$("#menu li:has(ul)").hover(function(){
$(this).find("ul").not(":animated").slideDown();
}, function(){
$(this).find("ul").not(":animated").slideUp();
});
})(jQuery);
CSS
#menu .sub-menu {
display: none;
}
HTML
<ul id="menu">
<li id="nav-menu-item-221" class="menu-item-has-children">
Home
<li id="nav-menu-item-226" class="menu-item-has-children">
About Us
<ul class="sub-menu dropdown-menu menu-odd menu-depth-2">
<li class="sub-menu-item"><a href="...">...</li>
<li class="sub-menu-item"><a href="...">...</li>
</ul>
</li>
<li id="nav-menu-item-233" class="menu-item-has-children">
Third
</li>
</ul>
Working JSfiddle

Answer 4

All you really need to do is nest the <ul> within your <li> element.
<nav>
<ul>
<li>Link</li>
<li>
Link
<ul>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Link</li>
</ul>
</nav>
Here's some CSS that will help you get started:
* Resets */
nav a {
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul {
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }
/* Top-level menu */
nav > ul > li {
float: left;
position: relative; }
nav > ul > li > a {
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }
/* Dropdown Menu */
nav ul li ul {
position: absolute;
background: #ccc;
width: 100%;
margin: 0;
padding: 0;
display: none; }
nav ul li ul li {
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }
Preview Demo