Home > Developer > JavaScript
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-CN"> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <title> css menu demonstration </title> <style type =" text/css "> </style> </pead> <body> <ul id = "nav"> <li> product introduction <ul> <li> product 1 </li> <li> product 1 </li> <li> product 1 </li> <li> product 1 </li> <li> product 1 </li> <li> product 1 </li> </ul> </li> <li> service Introduction <ul> <li> Service 2 </li> <li> Service 2 </li> <li> Service 2 </li> <li> Service 2 </li>> <li> Service 2 Service 2 </li> <li> Service 2 </li> </ul> </li> <li> success stories <ul> <li> case 3 </li> <li> case 3 </li> <li> case 3 case 3 </li> </ul> </li> <li> about us <ul> <li> ours 4 </li> <li> ours 4 </li> <li> ours 4 </li> <li> our 4th 111 </li> </ul> </li> <li> online demonstration <ul> <li> demonstration </li> <li> demo </li> <li> demo </li>/ li> <li> demonstration </li> </ul> </li> <li> Contact Us <ul> <li> contact </li> <li> contact </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Pure css drop-down menu
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns =" http://www.w3.org/1999/xhtml "> <pead> <title> old Y world- webpage special effects-navigation menu-beautiful secondary drop-down menu </title> <meta http-equiv = "content-Type" content = "text/html; charset = gb2312 "> <style type =" text/css ">/* common styling * // * set up the overall width of the menu div, the font and the margins */. menu {font-family: arial, sans-serif; width: 750px; margin: 0; margin: 50px 0 ;} /* remove the bullets and set the margin and padding to zero for the unordered list */. menu ul {padding: 0; margin: 0; list-style-type: none ;} /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */. menu ul li {float: left; position: relative;}/* style the links to be written px wide by 30px high with a top and right border 1px solid white. set the background color and the font size. */. menu ul li ,. menu ul li a: visited {display: block; text-align: center; text-decoration: none; width: pixel; height: 30px; color: #000; border: 1px solid # fff; border-width: 1px 1px 0 0; background: # c9c9a7; line-height: 30px; font-size: 11px ;} /* make the dropdown ul invisible */. menu ul li ul {display: none;}/* specific to non IE browsers * // * set the background and foreground color of the main menu li on hover */. menu ul li: hover a {color: # fff; background: # b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */. menu ul li: hover ul {display: block; position: absolute; top: 31px; left: 0; width: 105px ;} /* style the background and foreground color of the submenu links */. menu ul li: hover ul li a {display: block; background: # faeec7; color: #000;}/* style the background and forground colors of the links on hover */. menu ul li: hover ul li a: hover {background: # dfc184; color: #000 ;} </style> </pead> <body> <ul> <li> DEMOS <ul> <li> zero dollars </li> <li> wrapping text </li> <li> styled form </li> <li> active focus </li> <li> shadow boxing </li> <li> image map </li> <li> fun backgrounds </li> <li> fade scrolling </li> <li> em sized images </li> </ul> </li> <li> MENUS <ul> <li> spies menu </li> <li> vertical menu </li> <li> enlarging list </li> <li> link images </li> <li> non-rectangular </li> <li> jigsaw links </li> <li> circular links </li> </ul> </li> <li> LAYOUTS <ul> <li> fixed 1 </li> <li> Fixed 2 </li> <li> Fixed 3 </li> <li> Fixed 4 </li> <li> minimum width </ li> </ul> </li> <li> BOXES <ul> <li> spies menu </li> <li> vertical menu </li> <li> enlarging list </li> <li> link images </li> <li> non-rectangular </li> <li> jigsaw links </li> <li> circular links </li> </ul> </li> <li> MOZILLA <ul> <li> drop down menu </li> <li> cascading menu </li> <li> content: </li> <li> mozzie box </li> <li> rainbow box </li> <li> snooker cue </li> <li> target practice </li> <li> two tone headings </li> <li> shadow text </li> </ul> </li> <li> EXPLORER <ul> <li> example one </li> <li> weft fonts </li> <li> vertical align </li> </ul> </li> <li> OPACITY <ul> <li> opaque colours </li> <li> opaque menu </li> <li> partial opacity II </li> </ul> </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In general, do not use editplus for replication, which is prone to running errors.
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
