Recently found on the Internet A only CSS implementation of the Pull-down menu (drop-down menus), feeling very fresh and cool. So carefully read the author's introduction and source code, found that the core is a ": hover" pseudo class use. In CSS1, this pseudo class is available only for a object. And for a object with no href attribute (attribute), this pseudo class does not work. This pseudo class can be applied to any object in CSS2. However, IE6 and the following versions do not support CSS2 very well, so IE6 and the following versions cannot run the program well. Fortunately, the latest version of Firefox,netscape,opera,safari and other browsers can run the program well (I haven't tried other versions).
I found a way to solve the bug on the Internet, finally found a not very ideal method, using Plug-ins---IE7. This plugin can make up for a lot of IE6 in CSS, transparent PNG image display and other aspects of the flaw. Use is also very simple, download (44KB) after decompression see the inside of the readme can be done.
Here's an example of what I do, and you can look at the end result first.
Here are a few key places to say:
1, this code is to make this menu can be in IE6 and the following version of IE browser can work and write. Imported the Ie7-standard-p.js this file in IE7 this plugin. If you can make sure that everyone who sees your menu uses the latest version of a IE7 or Firefox,opera,netscape browser, you can get rid of that line of code.
<script src= "Ie7_0_9/ie7-standard-p.js" ></script>
2, this line of code is defined as the default state of the submenu is hidden.
#menu ul. Item {...} {Display:none;}
3, this line is the key code. It means that when the UL is in hover state, the submenu is displayed.
#menu ul:hover item{...} {Display:block;}
4, this line of code creates a menu (menu one), it has three submenu.
<div id= "menu"
<ul id= "item1"
<li class= "Top" > Menu one </li>
<li class= " Item "><a href=" # > submenu one </a></li>
<li class= "item" ><a href= "#" > submenu two </a> </li>
<li class= "item" ><a href= "#" > submenu three </a></li>
</ul></div>