Using CSS to implement a variety of Drop-down menu methods

Using CSS to implement a variety of Drop-down menu methods _ Experience Exchange

Last Update:2017-01-18 Source: Internet

Author: User

Tags cdata visibility

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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" >  </style> <script type=text/javascript><! [cdata[//><!]] ></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 &LT;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&gt ; 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 ">  </style> <script type=text/javascript> <! [cdata[//><!]] > </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 ">  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" &GT  </script> </pead> <body> <p>css menu-vertical</p> <pr/> <ul id= "n Avmenu "> <li>Blog</li> <li>work + <ul> <li>websites + <ul> <li>qrayg&lt ;/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 + &LT;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> &LT;/body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More