using css set hover in ul list - html

Question

this is my html file:-
<div id="load">
<ul>
<li>Activities
<ul>
<li>Physical1
<ul>
<li>Cricket
<ul>
<li>One Day</li>
</ul>
</li>
</ul>
</li>
<li>Test1
<ul>
<li>Test At Abc</li>
</ul>
</li>
<li>Test2
<ul>
<li>Test At Xyz</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
i want to set in to css hover.
i dont konw about css hover much so give me suggestion for this.
this is my output i needed.
hover in Acvivities display
Physical1
Test1
Test2
hover in Physcial1 display Cricket...
thanks...

Answer 1

ul > li > ul {
display: none; // hide all submenus
}
li:hover > ul {
display: block; // show sub menu when parent li is hovered
}
DEMO

Answer 2

ul li ul
{
display:none;
}
ul > li:hover > ul
{
display:block;
}
http://jsfiddle.net/AyLYe/

Answer 3

I won't provide the whole code, but with this base you can adapt the code to display the rest of what you need.
Before we start, see this tutorial I found with a google search: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu I scanned it at a glance and it looks pretty good, it will at least guide you through the concepts and the process.
Here's a JSFiddle:http://jsfiddle.net/Kq7vD/
Heres the CSS that makes it work:
#load ul li ul {
display: none;
}
#load ul li:hover ul {
display: block;
}
Note that by removing #load you can cause this to work across every list in your menu. The downside to this is that the css rules then apply to every list on your site, even if it shouldn't be a menu. It is recommended that you keep your rules relatively specific for this reason.
EDIT to address your comment:
If your HTML structure includes a DIV before each UL, even the nested UL's then your css rules will need to adapt to that new structure. In particular, it's also important to note that you will not set the UL to display: none/block; anymore but the DIVs.
Assuming a structure like:
<div id="load">
<div>
<ul>
<li>
<div>
<ul>
<li></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Your code would then look like...
#load div ul li div {
display: none;
}
#load div ul li:hover div {
display: block;
}