--a drop-down menu with only CSS for pull-down menus

Source: Internet
Author: User

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.