A simple example of a pure CSS implementation pull-down menu

You may often use hover this attribute, with hover to achieve the color change of the mouse and so on, in fact, hover is very powerful.

Share a mouse through, pop-up drop-down menu tips;

When we built a list:

<ul>
<li class= "Home" ><a href= "javascript:; target=" _blank "title=" "> Level menu </a></li>
<li class= "Slidewrap" > Level menu
<ul class= "Slide" >
<li><a href= "#" target= "_blank" title= "" > Level two menu </a></li>
<li><a href= "#" target= "_blank" title= "" > Level two menu </a></li>
</ul>
</li>
<li><a href= "javascript:;" target= _blank "title=" "> Level menu </a></li>
<li><a href= "javascript:;" target= _blank "title=" "> Level menu </a></li>

</ul>

We create a list of UL under the first Level menu and show the list hidden:

. slidewrap. Slide {position:absolute; display:none;}

Note that this time need to use positioning to place the level two menu;

And then:

. Slidewrap:hover Slide{display:block}/** slide element is displayed by mouse **/

Slide following the hover, note that it must be in the child element, the mouse through the parent element to achieve this effect.

What do you think? This little trick is simple and practical!