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 drop down menu </title> <style type= "Text/css" > <!--* {margin:0;padding:0;border:0;} body {font-family:arial, arial, serif; font-size:12 px } #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:vis ited {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:-999 px Width:520px; Note that the width must be set here; Position:absolute; Background: #CCC; } #nav li ul li{float:left;width:80px;//float is the key to sub-menu landscape, you can inherit the parent menu and omit float} #nav li ul a{display:block; width:65px;te xt-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> </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 </li> </ul> </li> <li> menu two <ul > <li> Menu Two </li> <li> menu two </li> <li> menu two </li> <li> menu two </li> <li> Menu two </li> </ul> </li> <li> menu three <ul> <li> menuThree </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> </body> </ptml >
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
CSS drop-down 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 drop-down menu demo </title> <style type=" Text/css "> <!--*{margin:0;padding : 0;border:0;} Body {font-family:arial, 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:visi Ted {color: #666; text-decoration:none;} #nav a:hover {color: #FFF; text-decoration:none;font-weight:bold;} #nav li {Floa T: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-d Ecoration:none; } #nav li ul a:visited {color: #666; text-decoration:none;} #nav li ul a:hover {color: #F3F3F3; text-decoration:none;font-w Eight:normal; Background: #C00; } #nav li:hover ul {left:auto;} #nav li.sfhover ul {left:auto;} #content {clear:left;}-</style> < ;/head> <body> <ul id= "NAV" > <li> product Introduction <ul> <li> product one </li> <li> product one </li > <li> Product One </li> <li> product one </li> <li> product one </li> <li> product one </li> </ul > </li> <li> Services <ul> <li> Service two </li> <li> service two </li> <li> service two </li > <li> Services II service two </li> <li> Service II service two </li> <li> service two </li> </ul> </li> <li> success Stories <ul> <li> case three </li> <li> case </li> <li> case three case three </li> <li> Case three case ThreeCase three </li> </ul> </li> <li> About us <ul> <li> US four </li> <li> US four </li> <li> US four </li> <li> us 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 </li> <li> Contact Contact </li> <li> Contact </li> < li> Contact </li> <li> Contact </li> <li> Contact Contact </li> <li> Contact Contact </li> </ul > </li> </ul> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
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" Dhtml-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; col Or: #FFF; }/*css Code for Menu begin:*//* Root = horizontal, Secondary = Vertical */ul#navmenu {margin:0; border:0 none; paddi ng: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; pos ition: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 */u L#navmenu a {border:1px solid #FFF; Border-right-color: #CCC; Border-bottom-color: #CCC; padding:0 6px; Float:none!im portant; /*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 {backgr Ound: #CCC; Color: #FFF; }/* 2nd Menu */Ul#navmenu li:hover Li A, ul#navmenu li.iehover li a {float:none; background: #EEE; color: #666;}/* 2 nd Menu Hover persistence */Ul#navmenu li:hover li A:hover, ul#navmenu li:hover li:hover A, ul#navmenu li.iehover Li A:ho ver, 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.i Ehover Li a {background: #EEE; color: #666;}/* 3rd Menu Hover Persistence */ul#navmenu Li:hover li:hover li A:hover, u L#navmenu Li:hover li:hover li:hover A, ul#navmenu li.iehover li.iehover li A:hover, ul#navmenu li.iehover li.iehover li.i Ehover a {background: #CCC; color: #FFF;}/* 4th Menu */ul#navmenu li:hover li:hover li:hover li A, ul#navmenu Li.iehov Er li.iehover li.iehover li a {background: #EEE; color: #666;}/* 4th Menu Hover */ul#navmenu li:hover li:hover li:hove R 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 Li.iehover ul ul, Ul#navmenu Li.ieh Over 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 Li.iehover ul, Ul#navmenu ul Li.iehover ul, Ul#navmenu ul ul Li.iehover ul {display:block;} </style> </pead> <body> <p>cs S 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> <li>learn + <ul> <li>fireworks + <ul> <li>aquabutton</li& Gt <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> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
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; Paddin g:30px; Background: #FFF; Color: #666; } h1 {Font:bold 16px arial, Helvetica, Sans-serif;} p {font:11px Arial, Helvetica, Sans-serif;} A {color: #900; Tex T-decoration:none; } a:hover {background: #900; color: #FFF;}/*css Code for Menu begin:*//* Root = Vertical, secondary = Vertical */ul#n Avmenu, 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*/position:relative;}/* Ro OT 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 {backgr Ound: #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.iehover li A:hover, ul#navme Nu 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:hov Er li A:hover, ul#navmenu li:hover li:hover li:hover A, ul#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 {background : #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:a Bsolute; top:0; left:160px; }/* Don't move-must Come before display:block for Gecko */Ul#navmenu Li:hover ul ul, Ul#navmenu Li:hover UL 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:hove R ul, Ul#navmenu ul UL Li:hover ul, Ul#navmenu Li.iehover ul, Ul#navmenu UL Li.iehover ul, Ul#navmenu ul UL Li.iehover ul {Display:block;} </style> </pead> <body> <p>css menu-vertical</p> <pr/> <ul id= "Navmenu" > & Lt;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> <li>fireworks + <ul> <li>aquaButton</li> & lt;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> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
CSS Implementation of bilingual navigation menus in English and Chinese
<! 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, Chinese-English bilingual menu "/> <meta http-equiv=" Description "Content=" fully implemented in CSS with the bilingual navigation menu "/> <meta content=" All "name=" robots "/> <meta name=" Author "content=" Forestgan "/> <meta name=" copyright "content=" http://www.forest53.com "/> <title> bilingual Chinese-English navigation menu with full CSS implementation </title> <style type= "text/css" > a{color: #FFFF99; text-decoration:none;} a:hover{color: #FFFFFF; text-dec Oration: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-deco Ration: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 {back Ground: #DC4E1B; height:8px; Overflow:hidden; Clear:both; } </style> <link href= ". /css/main.css "rel=" stylesheet "type=" Text/css "/> </pead> <body> <ul id=" NAV "> <li>home <span> Home </span></li> <li>Blog<span> logs </span></li> <li>guestbook <span> message book </span></li> <li>Pickbar<span> boutique </span></li> <li> Fansir<span> fan sir</span></li> </ul> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
