Web|web Standard | menu | navigation <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 (New RegExp (? | ^), sfhover\\b "),
"");
}
}
}
Window.onload=menufix;
--><!]] ></script>
<body>
<ul id= "NAV" >
<li><a href= "#" > Product introduction </a>
<ul>
<li><a href= "#" > Products </a></li>
<li><a href= "#" > Products </a></li>
<li><a href= "#" > Products </a></li>
<li><a href= "#" > Products </a></li>
<li><a href= "#" > Products </a></li>
<li><a href= "#" > Products </a></li>
</ul>
</li>
<li><a href= "#" > Service Introduction </a>
<ul>
<li><a href= "#" > Service II </a></li>
<li><a href= "#" > Service II </a></li>
<li><a href= "#" > Service II </a></li>
<li><a href= "#" > Service II </a></li>
<li><a href= "#" > Service two Services 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 href= "#" > 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>
<li><a href= "#" > US four </a></li>
<li><a href= "#" > US four </a></li>
<li><a href= "#" > US 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><a href= "#" > Demo </a></li>
<li><a href= "#" > Demo demo </a></li>
<li><a href= "#" > Demo Demo demo </a></li>
</ul>
</li>
<li><a href= "#" > Contact Us </a>
<ul>
<li><a href= "#" > 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 </a></li>
</ul>
</li>
</ul>
</body>
<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"); 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, new RegExp (? | ^) sfhover\\b ")," ");}}} Window.onload=menufix;//--><!]] ></script></pead><body><ul id= "nav" ><li><a href= "#" > Product introduction </a><ul ><li><a href= "#" > Products One </a></li><li><a href= "#" > Product one </a></li><li><a href= "#" > Products One </a></li><li><a href= "#" > Product one </a></li><li><a href= "#" > Products 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><li>< A href= "#" > Service two </a></li><li><a href= "#" > Service two </a></li><li><a href= "# "> Service two </a></li><li><a href=" # "> Service two Service two services 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 href= "#" > 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><li><a href= "#" > We four </a></li ><li><a href= "#" > US 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><a href= "#" > Demo demo </a></li>< Li><a href= "#" > Demo demo demo </a></li><li><a href= "#" > Demo Demo Demo demo </a></li> </ul></li><li><a href= "#" > Contact us </a><ul><li><a href= "#" > 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 Contact </a> </li><li><a href= "#" > Contact Contact </a></li><li><a href= "#" > Contact Contact </a> </li></ul></li></ul></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
