All along, we mostly use JS to implement pop-up menu, but according to the standard of the CSS, there is no need. You simply need to use css+html to make an infinitely graded pop-up menu.
Yes, that is, using the Pseudo class Element:hover.
Note that to navigate this example, you must use a standard browser, such as Mozilla Firefox/opera 7.5
IE Not!!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead> <title>css menu</title> <style type= "text /css ">/*<! [cdata[*/ul.menu {width:180px; Cursor:hand; List-style-type:none; border:1px solid #cccccc; padding:0px; margin:0px; } ul.menu li {width:100%; Display:block; position:relative; Ul.menu Li a {background-color: #06829C; Color: #ffffff; width:100%; Display:block; font-size:9pt; padding:2px; padding-left:10px; } ul.menu li Ul.menu {display:none; width:190px; Position:absolute; z-index:1000; left:80%; top:-10px; } Ul.menu li:hover > a {width:100%; Background-color: #64ACF8; Color: #ffffff; } ul.menu li:hover > Ul.menu {display:block; }/*]]>*/</style></pead><body> <ul class= "menu" > <li><a href= "#" >item 1</a></li> <li> <a href= "#" >menu Item ></a> <ul class= "Menu" > <li><a href= "#" >item</a></li> <l I> <a href= "#" >item ></a> <ul class= "Menu" > <li><a href= "#" >menu item</a></li> <li>& Lt;a href= "#" >menu item</a></li> </ul> </li> <li> <a href= "#" >item ></a> <ul class= "Menu" > <Li><a href= "#" >menu item</a></li> <li><a href= "#" >menu item& Lt;/a></li> <li><a href= "#" >menu item</ a></li> </ul> </li> <li> <a href= "#" >item ></a> <ul class= "Menu" > <li><a href= "#" >menu item</a></li> <li><a href= "#" & Gt;menu item</a></li> <li><a href= "#" >menu item</a></li> <li><a href= "#" >menu item</a></li> <l I><a href= "#" >menu item</a></li> <li><a href= "#" >menu ITEM&L T;/a></li> <li><a href= "#" >menu item</a></li> <li> ; <a href= "#" >menu item</a></li> <li><a href= "#" >menu item</a ></li> <li><a href= "#" >menu item</a></li> <li><a href= "#" >menu item</a></li> <li><a href= "# ">menu item</a></li> </ul> </li> </ Ul> </li> </ul></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
