<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, song body, 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 "),
""); http://www.huiyi8.com/css3/anniu/
}
}
}
Window.onload=menufix;
--><!]] ></script>
<body>
<ul id= "NAV" >
<li><a href= "#" _fcksavedurl= "#" > Product introduction </a>
<UL>CSS3 button
<li><a href= "#" _fcksavedurl= "#" > Product one </a></li>
<li><a href= "#" _fcksavedurl= "#" > Product one </a></li>
<li><a href= "#" _fcksavedurl= "#" > Product one </a></li>
<li><a href= "#" _fcksavedurl= "#" > Product one </a></li>
<li><a href= "#" _fcksavedurl= "#" > Product one </a></li>
<li><a href= "#" _fcksavedurl= "#" > Product one </a></li>
</ul>
</li>
<li><a href= "#" _fcksavedurl= "#" > Service Introduction </a>
<ul>
<li><a href= "#" _fcksavedurl= "#" > Service II </a></li>
<li><a href= "#" _fcksavedurl= "#" > Service II </a></li>
<li><a href= "#" _fcksavedurl= "#" > Service II </a></li>
<li><a href= "#" _fcksavedurl= "#" > Service II </a></li>
<li><a href= "#" _fcksavedurl= "#" > Service two Services two </a></li>
<li><a href= "#" _fcksavedurl= "#" > Service II </a></li>
</ul>
</li>
<li><a href= "#" _fcksavedurl= "#" > Success Stories </a>
<ul>
<li><a href= "#" _fcksavedurl= "#" > Case three </a></li>
<li><a href= "#" _fcksavedurl= "#" > Cases </a></li>
<li><a href= "#" _fcksavedurl= "#" > Case three case three </a></li>
<li><a href= "#" _fcksavedurl= "#" > Case three case three case three </a></li>
</ul>
</li>
<li><a href= "#" _fcksavedurl= "#" > About Us </a>
<ul>
<li><a href= "#" _fcksavedurl= "#" > US four </a></li>
<li><a href= "#" _fcksavedurl= "#" > US four </a></li>
<li><a href= "#" _fcksavedurl= "#" > US four </a></li>
<li><a href= "#" _fcksavedurl= "#" > US four 111</a></li>
</ul>
</li>
<li><a href= "#" _fcksavedurl= "#" > Online demo </a>
<ul>
<li><a href= "#" _fcksavedurl= "#" > Demo </a></li>
<li><a href= "#" _fcksavedurl= "#" > Demo </a></li>
<li><a href= "#" _fcksavedurl= "#" > Demo </a></li>
<li><a href= "#" _fcksavedurl= "#" > Demo demo </a></li>
<li><a href= "#" _fcksavedurl= "#" > Demo demo </a></li>
<li><a href= "#" _fcksavedurl= "#" > Demo </a></li>
<li><a href= "#" _fcksavedurl= "#" > Demo demo </a></li>
<li><a href= "#" _fcksavedurl= "#" > Demo Demo demo </a></li>
</ul>
</li>
<li><a href= "#" _fcksavedurl= "#" > Contact Us </a>
<ul>
<li><a href= "#" _fcksavedurl= "#" > Contact Contact Contact </a></li>
<li><a href= "#" _fcksavedurl= "#" > Contact Contact </a></li>
<li><a href= "#" _fcksavedurl= "#" > Contact </a></li>
<li><a href= "#" _fcksavedurl= "#" > Contact </a></li>
<li><a href= "#" _fcksavedurl= "#" > Contact </a></li>
<li><a href= "#" _fcksavedurl= "#" > Contact Contact </a></li>
<li><a href= "#" _fcksavedurl= "#" > Contact Contact </a></li>
</ul>
</li>
</ul>
</body>
Js+css Implementing a simple drop-down menu