Home>

This is a fresh drop-down menu with gray tones,Fully compliant with web standards, good compatibility,The menu is simple and easy to use.Suitable for most web styles.If the hue is not what i want,Use your own ingenuity,Modify it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>css drop-down menu,Vertical</title>
<style type="text/css" media="screen">
<!-
#nav {
width:auto;
float:left;
border-left:1px solid #777;
}
ul {
margin:0px;
padding:0px;
list-style:none;
}
ul li {
position:relative;
width:120px;
float:left;
}
li ul {
position:absolute;
left:0px;
top:23px;
display:none;
border-bottom:1px solid #777;
border-left:0px;
}
ul li a {
display:block;
font-size:12px;
line-height:22px;
text-decoration:none;
color:#333;
background-color:#fff;
height:22px;
padding-left:8px;
border:1px solid #777;
border-left:0px;
}
ul li ul li a {
border:1px solid #777;
border-bottom:0px;
}
a:hover {
color:#f60;
background-color:#efefef;
}
* html ul li {
float:left;
height:1%;
}
* html ul li a {
height:1%;
}
li:hover ul, li.over ul {
display:block;
}
->
</style>
<script language="javascript" type="text/javascript">
<!-
startlist=function () {
if (document.all&document.getelementbyid) {
var menuroot=document.getelementbyid ("menu");
for (var i=0;i<menuroot.childnodes.length;i ++) {
var node=menuroot.childnodes [i];
if (node.nodename == "li") {
node.onmouseover=function () {
this.classname +="over";
}
node.onmouseout=function () {
this.classname=this.classname.replace ("over", "");
}
}
}
}
}
window.onload=startlist;
->
</script>
</head>
<body>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a>
<ul>
<li><a href="#">Site introduction</a></li>
<li><a href="#">Customer feedback</a></li>
<li><a href="#"&Products</a></li>
</ul>
</li>
<li><a href="#">Script Download</a>
<ul>
<li><a href="#">Latest script</a></li>
<li><a href="#">Download Ranking</a></li>
<li><a href="#">Classification index</a></li>
</ul>
</li>
<li><a href="#">Web page effects</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Layout</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
  • Previous C and C ++ mixed programming issues
  • Next Use show () and hide () method to animate show and hide pictures in Jquery