Horizontal 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 "lang=" ZH-CN "> <pead> <meta http-equiv=" Content-type " Content= "text/html; charset=gb2312 "/> <meta http-equiv= content-language" content= "ZH-CN"/> <title> horizontal down pull menu </title> <style type= "Text/css" > <!--* {margin:0;padding:0;border:0;} Body {font-family:arial, XXFarEastFont-Arial, serif; font-size:12px; } #nav {height:24px; List-style-type:none; padding-left:200px; Line-height:24px;overflow:hidden;background: #999; #nav a {display:block; width:80px; text-align:center; } #nav a:link {color: #EEE; text-decoration:none; } #nav a:visited {color: #EEE; text-decoration:none; } #nav a:hover {color: #FFF; Text-decoration:none;font-weight:bold;background: #CCC; #nav li {float:left; width:80px; #nav Li ul {line-height:24px; List-style-type:none; TeXt-align:left; Left: -999px; width:520px; Note that you must set the width here; Position:absolute; Background: #CCC; #nav Li ul li{float:left;width:80px//float is the key to submenu horizontal, can inherit the parent menu and omit float} #nav li ul a{display:block; width:65 px;text-align:left;padding-left:15px; #nav Li ul a:link {color: #F1F1F1; text-decoration:none; #nav Li ul a:visited {color: #F1F1F1; text-decoration:none; #nav Li ul a:hover {color: #FFF; Text-decoration:none;font-weight:normal;background: #C00; } #nav li:hover ul {left:25%; } #nav li.sfhover ul {left:25%; } #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> menu One <ul> <li> menu one </li> <li> Menu One </li> <li> menu one </li> <li> menu one </li> <li> menu one </li> <li> menu One & Lt;/li> </ul> </li> <li> menu Two <ul> <li> menu two </li> <li> menu two </li> <l I> Menu Two </li> <li> menu two </li> <li> menu two </li> </ul> </li> <li> menu three <UL&G T <li> Menu Three </li> <li> menu three </li> <li> menu three </li> <li> menu three </li> <li> menu three </li> </ul> </li> <li> menu Four <ul> <li> menu four </li>;li> Menu Four </li> <li> menu four </li> <li> menu four </li> <li> menu four </li> </ul> </ Li> <li> Menu Five <ul> <li> menu five </li> <li> menu five </li> <li> menu five </li> <li> ; menu Five </li> <li> menu five </li> </ul> </li> <li> menu Six <ul> <li> menu six </li> <li> Menu Six </li> <li> menu six </li> <li> menu six </li> <li> menu six </li> </ul> </li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
CSS Dropdown navigation menu effect
<! 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 "lang=" ZH-CN "> <pead> <meta http-equiv=" Content-type " Content= "text/html; charset=gb2312 "/> <title>css dropdown 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{wedisplay: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& Gt <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> We four </li> <li> we 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 Demo </li> <li> demo demo </li> <li> demo demo </li> <li> Demo Demo Demo </li> <li> Demo Demo Demo Demo </li> </ul> </li> <li> Contact Us <ul> <li> Contact Contact Contact </li> <li> Contact Contact </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]
CSS Horizontal 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> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>css menu-horizontal</title> <style type=" Text/css "> <!--@import" DH Tml-horiz.css "; --> body {margin:0; padding:30px; Background: #FFF; Color: #666; } h1 {Font:bold 16px Arial, Helvetica, Sans-serif; } p {font:11px Arial, Helvetica, Sans-serif; } A {color: #900; Text-decoration:none; } a:hover {background: #900; Color: #FFF; }/*css Code for Menu begin:*//* Root = horizontal, secondary = Vertical/ul#navmenu {margin:0; border:0 none; padding:0; width:500px; /*for khtml*/List-style:none; height:24px; } ul#navmenu li {margin:0; border:0 none; padding:0; Float:left; /*for gecko*/Display:inline; List-style:none; Position relative; height:24px; } Ul#navmenu ul {margin:0; border:0 none; padding:0; width:160px; List-style:none; Display:none; Position:absolute; top:24px; left:0; Ul#navmenu ul li {float:none;/*for gecko*/Display:block!important; Display:inline; /*for ie*/}/* Root Menu */Ul#navmenu a {border:1px solid #FFF; Border-right-color: #CCC; Border-bottom-color: #CCC; Padding:0 6px; Float:none!important; /*for opera*/Float:left; /*for ie*/Display:block; Background: #EEE; Color: #666; Font:bold 10px/22px Verdana, Arial, Helvetica, Sans-serif; Text-decoration:none; Height:auto!important; height:1%; /*for ie*/}/* Root Menu Hover persistence/ul#navmenu a:hover, Ul#navmenu li:hover A, Ul#navmenu li.iehover a { Background: #CCC; Color: #FFF; }/* 2nd Menu/Ul#navmenu li:hover li A, ul#navmenu li.iehover li a {float:none; Background: #EEE; Color: #666; }/* 2nd Menu Hover Persistence * * Ul#navmenu li:hover li A:Hover, Ul#navmenu li:hover li:hover A, Ul#navmenu li.iehover li A:hover, ul#navmenu li.iehover li.iehover a {Backgrou Nd: #CCC; Color: #FFF; }/* 3rd Menu */ul#navmenu li:hover li:hover li A, ul#navmenu li.iehover li.iehover li a {background: #EEE; Color: #666; }/* 3rd Menu Hover Persistence * * ul#navmenu li:hover li:hover li A:hover, ul#navmenu li:hover li:hover li:hover A, u L#navmenu li.iehover li.iehover li a:hover ul#navmenu li.iehover li.iehover li.iehover A {background: #CCC; Color: #FFF; }/* 4th Menu/ul#navmenu li:hover li:hover li:hover li a ul#navmenu li.iehover li.iehover li.iehover li a {backgr Ound: #EEE; Color: #666; }/* 4th Menu Hover/ul#navmenu li:hover li:hover li:hover li A:hover, ul#navmenu li.iehover li.iehover, Li.iehover Li a:hover {background: #CCC; Color: #FFF; Ul#navmenu ul ul, Ul#navmenu UL ul ul Display:none; Position:absolute; top:0; left:160px; }/* Do not move-must Come before display:block for Gecko * * Ul#navmenu Li:hover ul ul, Ul#navmenu Li:hover ul ul, Ul#navmenu ul ul, Li.iehover Ul#navmenu UL ul ul {display:none; Ul#navmenu Li:hover ul, Ul#navmenu UL Li:hover ul, Ul#navmenu ul UL Li:hover UL Ul#navmenu ul li.iehover Nu UL Li.iehover ul, Ul#navmenu ul UL Li.iehover ul Display:block; } </style> <script type= "Text/javascript" > navhover = function () {var lis = document.getElementById ("NAVM ENU "). getElementsByTagName (" LI "); for (var i=0; i<lis.length; i++) {lis[i].onmouseover=function () {this.classname+= "Iehover"; } lis[i].onmouseout=function () {This.classname=this.classname.replace (New RegExp ("iehover\\b"), ""); }} if (window.attachevent) window.attachevent ("onload", navhover); </script> </pead> <body> <p>css menu-horizontal</p> <pr/> <ul id= "Navmenu "> <li>Blog</li> <li>work + <ul> <li>websites + <ul> <li>qrayg</li> <li>qArcade</li> <li>qLoM</li> <li>qDT</li> </ul > </li> <li>pen and ink</li> <li>free interfaces</li> </ul> </li> <l I>learn + <ul> <li>fireworks + <ul> <li>aquaButton</li> <li>aquabutton2</li > <li>waterDrop</li> <li>lightFX</li> <li>lightFX2</li> </ul> </li& Gt <li>css + <ul> <li>footerStick</li> <li>spriteNav</li> <li> @import </li > </ul> </li> </ul> </li> <li>Info</li> <li>Contact</li> </ul > </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
CSS Vertical 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> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>css menu-vertical</title> <style type=" Text/css "> body {margin:0; padding:30px; Background: #FFF; Color: #666; } h1 {Font:bold 16px Arial, Helvetica, Sans-serif; } p {font:11px Arial, Helvetica, Sans-serif; } A {color: #900; Text-decoration:none; } a:hover {background: #900; Color: #FFF; }/*css Code for Menu begin:*//* Root = Vertical, secondary = Vertical * Ul#navmenu, Ul#navmenu Li, Ul#navmenu ul margin:0; border:0 none; padding:0; width:160px; /*for khtml*/List-style:none; Ul#navmenu li {display:block!important;/*for good browsers*/display:inline;/*for ie*/; }/* Root Menu */Ul#navmenu a {border:1px Solid #FFF; Border-right-color: #CCC; Border-bottom-color: #CCC; Padding:0 6px; Display:block; Background: #EEE; Color: #666; Font:bold 10px/22px Verdana, Arial, Helvetica, Sans-serif; Text-decoration:none; Height:auto!important; height:1%; /*for ie*/}/* Root Menu Hover persistence/ul#navmenu a:hover, Ul#navmenu li:hover A, Ul#navmenu li.iehover a { Background: #CCC; Color: #FFF; }/* 2nd Menu */Ul#navmenu li:hover Li A, ul#navmenu Li.iehover li a {background: #EEE; Color: #666; }/* 2nd Menu Hover Persistence * * Ul#navmenu li:hover li A:hover, ul#navmenu li:hover li:hover A, Ul#navmenu Li.iehov Er li A:hover, ul#navmenu li.iehover li.iehover A {background: #CCC; Color: #FFF; }/* 3rd Menu */ul#navmenu li:hover li:hover li A, ul#navmenu li.iehover li.iehover li a {background: #EEE; Color: #666; }/* 3rd Menu Hover Persistence * * ul#navmenu li:hover li:hover li A:hover, ul#navmenu li:hover li:hover li:hover A, u L#navmenu Li.iehoVer li.iehover li A:hover, ul#navmenu li.iehover li.iehover a {li.iehover: #CCC; Color: #FFF; }/* 4th Menu/ul#navmenu li:hover li:hover li:hover li a ul#navmenu li.iehover li.iehover li.iehover li a {backgr Ound: #EEE; Color: #666; }/* 4th Menu Hover/ul#navmenu li:hover li:hover li:hover li A:hover, ul#navmenu li.iehover li.iehover, Li.iehover Li a:hover {background: #CCC; Color: #FFF; } Ul#navmenu UL, Ul#navmenu ul ul, Ul#navmenu UL ul ul Display:none; Position:absolute; top:0; left:160px; }/* does not move-must Come before display:block for Gecko/Ul#navmenu ul ul, Li:hover ul ul, Ul#navmenu Li.iehover ul ul, Ul#navmenu Li.iehover UL ul ul Display:none; Ul#navmenu Li:hover ul, Ul#navmenu UL Li:hover ul, Ul#navmenu ul UL Li:hover UL Ul#navmenu ul li.iehover Nu UL Li.iehover ul, Ul#navmenu ul UL Li.iehover ul Display:block; } </style> <script type= "Text/javascript" > <!--Navhover = function () {var lis = document.getElementById ("Navmenu"). getElementsByTagName ("LI"); for (var i=0; i<lis.length; i++) {lis[i].onmouseover=function () {this.classname+= "Iehover"; } lis[i].onmouseout=function () {This.classname=this.classname.replace (New RegExp ("iehover\\b"), ""); }} if (window.attachevent) window.attachevent ("onload", navhover); --> </script> </pead> <body> <p>css menu-vertical</p> <pr/> <ul id= "n Avmenu "> <li>Blog</li> <li>work + <ul> <li>websites + <ul> <li>qrayg< ;/li> <li>qArcade</li> <li>qLoM</li> <li>qDT</li> </ul> </li> ; Li>pen and ink</li> <li>free interfaces</li> </ul> </li> <li>learn + <UL&G T <li>fireworks + <ul> <li>aquaButton</li> <li>aquaButton2</li> <li>waterdrop</li> <li>lightFX</li> <li>lightFX2</li> </ul> </li> <li>css + <ul> <li>footerStick</li> <li>spriteNav</li> <li> @import </li> </ul > </li> </ul> </li> <li>Info</li> <li>Contact</li> </ul> </bo Dy> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
CSS Implementation of bilingual navigation menu in Chinese and English
<! 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" xml:lang= "en" lang= "en" > <pead> <meta http-equiv= "Content-type" "Content=" text/html; charset=gb2312 "/> <meta name=" Keywords "content=" bilingual menu, bilingual menu in Chinese and English "/> <meta http-equiv=" Description "Content=" is fully implemented in the CSS Bilingual navigation menu "/> <meta content=" All "name=" robots "/> <meta name=" Author "content=" Forestg An "/> <meta name=" "Copyright" content= "http://www.forest53.com"/> <title> The bilingual navigation menu in English and Chinese is fully implemented with CSS </ title> <style type= "text/css" > a{color: #FFFF99; Text-decoration:none; a:hover{color: #FFFFFF; Text-decoration:underline; } #nav {padding:10px 10px 0; font-size:12px; Font-weight:bold; Margin:1em 0 0; List-style:none; } #nav li{Float:left; margin-right:1px; }. bi{position:relative; z-index:0; }. bi:hover{z-index:99; }. Bi:hoveR span{visibility:visible; top:0; left:0; Cursor:pointer; }. Bi span{position:absolute; Left: -999em; Visibility:hidden; #nav Li A,.bi:hover span{line-height:20px; Text-decoration:none; Background: #DDDDDD; Color: #666666; Display:block; width:80px; Text-align:center; #nav li a:hover,.bi:hover span{color: #FFFFFF; Background: #DC4E1B; }. bi:hover span{padding-top:2px; } #navbar {background: #DC4E1B; height:8px; Overflow:hidden; Clear:both; } </style> <link href= ". /css/main.css "rel=" stylesheet "type=" Text/css "/> </pead> <body> <div id=" Top "> <ul id=" NAV "& Gt <li>Home<span> Home </span></li> <li>Blog<span> log </span></li> <li >guestbook<span> message book </span></li> <li>Pickbar<span> fine Bar </span></li> <li>fansir<span> fan sir</span></li> </ul> <div id= "NavBar" ></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]