<ptml xmlns= "http://www.w3.org/1999/xhtml" lang= "ZH-CN" > <pead> <meta http-equiv= "Content-type" Content= "text/html; charset=gb2312 "/> <title>css Menu Demo </title> <style type=" Text/css "> <!--*{margin:0;padding:0; border:0;} Body {font-family:arial, XXFarEastFont-Arial, serif; font-size:12px; } #nav {line-height:24px; list-style-type:none; background: #666; #nav a {display:block; width:80px; text-align:center; } #nav a:link {color: #666; text-decoration:none; } #nav a:visited {color: #666; text-decoration:none; } #nav a:hover {color: #FFF; text-decoration:none;font-weight:bold; #nav li {float:left; width:80px; background: #CCC; #nav li a:hover{background: #999; #nav Li ul {line-height:27px; list-style-type:none;text-align:left; Left: -999em; width:180px; Position:absolute; #nav Li ul li{float:left; width:180px; Background: #F6F6F6; #nav Li ul a{display:block; width:156px;text-align:left;padding-left: 24px; #nav Li ul a:link {color: #666; text-decoration:none; #nav Li ul a:visited {color: #666; text-decoration:none; #nav Li ul a:hover {color: #F3F3F3; text-decoration:none;font-weight:normal; Background: #C00; } #nav li:hover ul {left:auto; } #nav li.sfhover ul {left:auto; } #content {clear:left; }--> </style> <script type=text/javascript><!--//--><! [cdata[//><!--function Menufix () {var sfels = document.getElementById ("Nav"). getElementsByTagName ("Li"); for (var i=0 i<sfels.length; i++) {sfels[i].onmouseover=function () {this.classname+= (this.classname.length>0?) "": "") + "Sfhover"; } sfels[i].onmousedown=function () {this.classname+= (this.classname.length>0?) "": "") + "Sfhover"; } sfels[i].onmouseup=function () {this.classname+= (this.classname.length>0?) "": "") + "Sfhover"; } sfels[i].onmouseout=function () {this.classname=this.classname.replace (? | ^), "sfhover\\b"); } } } Window.onload=menufix; --><!]] ></script> </pead> <body> <ul id= "NAV" > <li> product Introduction <ul> <li> product One </li> ; <li> Products One </li> <li> products one </li> <li> products one </li> <li> product one </li> <li> product one </li> </ul> </li> <li> Service Introduction <ul> <li> service two </li> <li> service two </li> ;li> Service II </li> <li> Service two service two </li> <li> Service two service two service two </li> <li> service two </li> </ul > </li> <li> Successful case <ul> <li> case three </li> <li> case </li> <li> case three case three </li& Gt <li> Case three case three case three </li> </ul> </li> <li> About Us <ul> <li> we four </li> <li> Our four </li> <li> us four </li> <li> our four 111</li> </ul> </li> <li> Online Demo <ul> ; <li> Demo </li> <li> demo </li> <li> demo </li> <li> Demo Demo </li> <li> Demo Demo </li> <li> demo </li> <li> Demo demo </li> <li> Demo Demo Demo Demo </li> </ul> </li> <li> Contact Us <ul> <li> Contact Contact Contact Us </li> <li> Contact Us </li> <li > Contact </li> <li> contact </li> <li> Contact Contact </li> <li> Contact Contact </li> <li> Contact Contact </li> </ul> </li> </ul> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Pure CSS Pull-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-web effects-navigation menu-Beautiful level two Pull-down menu </ title> <meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and </pead>--> <style type= "TEXT/CSS" >/* Common styling///* Set up the overall width of the menu div, t He 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" the items are in a line and their position relative so this drop down list would appear in The right place underneath each list item */. menu ul li {float:left; position:relative; }/* Style The links to is 104px wide by 30px higH with a and right border 1px solid white. Set the background color and the font size. */. Menu ul li A,. Menu ul li a:visited {display:block; Text-align:center; Text-decoration:none; width:104px; 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:blo ck 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> <!--[if LTE IE 6]> <style type= "TEXT/CSS" >/* Styling specific to Internet Explorer IE5.5 and IE6. Yet to the if IE7 handles li:hover/* get rid of any default table style/table {border-collapse:collapse; margin:0; padding:0; }/* Ignore the link used by ' other browsers '/. Menu ul li A.hide,. Menu ul li A:visited.hide {display:none; }/* Set the background and foreground color of the main menu link on hover */. Menu ul li a:hover {color: #fff; Background: #b3ab79; }/* Make the Sub menu UL visible and position it beneath the main Menu list item */. menu ul Li A:hover ul {display:b Lock Position:absolute; top:32px; left:0; width:105px; }/* Style The background and foreground color of the submenu links */. menu ul Li A:hover ul li a {background: #faeec7 ; Color: #000; }/* Style The background and forground colors of the links on hover */. Menu ul li A:Hover ul li a:hover {background: #dfc184; Color: #000; } </style> <! [endif]--> </pead> <body> <!--Add the following code between <body> and </body>--> <div class= "Menu" > & Lt;ul> <li>demos <!--[if LTE IE 6]> DEMOS <table><tr><td> <! [endif]--> <ul> <li>zero dollars</li> <li>wrapping text</li> <li>styled FORM&L t;/li> <li>active focus</li> <li>shadow boxing</li> <li>image map</li> <li& Gt;fun backgrounds</li> <li>fade scrolling</li> <li>em sized images</li> </ul> ;! --[if LTE IE 6]> </td></tr></table> <! [endif]--> </li> <li>menus <!--[if LTE IE 6]> MENUS <table><tr><td> <! [endif]--> <ul> <li>spies menu</li> <li>vertical menu</li> <li>enlarging list& Lt;/li> <li>link images</li> <li>non-rectangular</li> <li>jigsaw links</li> <li>circular Links </li> </ul> <!--[if LTE IE 6]> </td></tr></table> <! [endif]--> </li> <li>layouts <!--[if LTE IE 6]> LAYOUTS <table><tr><td> <! [endif]--> <ul> <li>fixed 1</li> <li>fixed 2</li> <li>fixed 3</li> <l i>fixed 4</li> <li>minimum width</li> </ul> <!--[if LTE IE 6]> </td></tr> </table> <! [endif]--> </li> <li>boxes <!--[if LTE IE 6]> BOXES <table><tr><td> <! [endif]--> <ul> <li>spies menu</li> <li>vertical menu</li> <li>enlarging list& lt;/li> <li>link images</li> <li>non-rectangular</li> <li>jigsaw links</li> & Lt;li>circular links</li> ≪/ul> <!--[if LTE IE 6]> </td></tr></table> <! [endif]--> </li> <li>mozilla <!--[if LTE IE 6]> MOZILLA <table><tr><td> <! [endif]--> <ul> <li>drop down menu</li> <li>cascading menu</li> <LI>CONTENT:&L t;/li> <li>mozzie box</li> <li>rainbow box</li> <li>snooker cue</li> <li> ; target practise</li> <li>two tone headings</li> <li>shadow text</li> </ul> <!- -[if LTE IE 6]> </td></tr></table> <! [endif]--> </li> <li>explorer <!--[if LTE IE 6]> Explorer <table><tr><td> ;! [endif]--> <ul> <li>example one</li> <li>weft fonts</li> <li>vertical align< ;/li> </ul> <!--[if LTE IE 6]> </td></tr></table> <! [endif]--> </li><li>opacity <!--[if LTE IE 6]> OPACITY <table><tr><td> <! [endif]--> <ul> <li>opaque colours</li> <li>opaque menu</li> <li>partial Opaci ty</li> <li>partial opacity ii</li> </ul> <!--[if LTE IE 6]> </td></tr></ Table> <! [endif]--> </li> </ul> <!--clear the floats if required--> <div class= "clear" > </DIV&G T </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In general, copy things, try not to use EditPlus replication, easy to run errors.
