Css|web|web Standard | menu | navigation | dropdown
<ptml xmlns= "http://www.w3.org/1999/xhtml" lang= "ZH-CN" ><pead><meta "http-equiv=" 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.le Ngth>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 (new RegExp ("(? | ^), "sfhover\\b"); }}}window.onload=menufix;//--><!]] ></script></pead><body><ul id= "nav" ><li><a href= "#" > Product introduction </a> <ul > <li><a href= "#" > Product one </a></li> <li><a href= "#" > Product one </a></li> &l T;li><a href= "#" > Product one </a></li> <li><a href= "#" > Product one </a></li> <li> <a href= "#" > Product one </a></li> <li><a href= "#" > Product one </a></li> </ul></li ><li><a href= "#" > Service introduction </a> <ul> <li><a href= "#" > Service two </a></li> &l T;li><a href= "#" > Service II </a></li> <li><a href= "#" > Service II </a></li> <li> <a href= "#" > Service two Service two </a></li> <li><a href= "#" > Service two Service two service two </a></li> <li ><a href= "#" > Service II </a></li> </UL></LI><LI><a href= "#" > Success Stories </a> <ul> <li><a href= "#" > Case three </a></li> <li><a HR ef= "#" > Case </a></li> <li><a href= "#" > Case three case three </a></li> <li><a href= "#" > Case three case three case three </a></li> </ul></li><li><a href= "#" > About us </a> <ul> &L T;li><a href= "#" > We four </a></li> <li><a href= "#" > We four </a></li> <li> <a href= "#" > We four </a></li> <li><a href= "#" > Our four 111</a></li> </ul>< /li><li><a href= "#" > Online demo </a> <ul> <li><a href= "#" > Demo </a></li> <li><a href= "#" > Demo </a></li> <li><a href= "#" > Demo </a></li> <li> <a href= "#" > Demo demo </a></li> <li><a href= "#" > Demo demo </a></li> <li>& Lt;a href= "#" > Demo </a></li> <li><a href= "#" > Demo demo </a></li> <li><a href= "#" > Demo Demo Demo demo </a>& Lt;/li> </ul></li><li><a href= "#" > Contact us </a> <ul> <li><a href= "#" &G t; Contact Contact Contact </a></li> <li><a href= "#" > Contact Contact </a></li> <li><a href= "#" > Contact </a></li> <li><a href= "#" > Contact </a></li> <li><a href= "#" > Contact </a></li> <li><a href= "#" > Contact Contact </a></li> <li><a href= "#" > Contact Contact & Lt;/a></li> </ul></li></ul></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]