<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>製作二級菜單 ...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>製作二級菜單</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 1.5;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #ccc;
width: 100px;
}
#menu ul li {
background-color: #eee;
height: 26px;
line-height: 26px;
border-bottom: 1px solid #ccc;
}
#menu ul li a {
color: #000;
text-decoration: none;
}
#menu ul li a:hover {
color: #ff0000;
}
#menu ul li ul {
display: none;
position: absolute;
left: 100px;
top: 0px;
}
#menu ul li.current ul {
display: block;
}
</style>
<script type="text/javascript">
startList = function () {
navRoot = document.getElementById("menu");
var allli = navRoot.getElementsByTagName("li");
for (i = 0; i < allli.length; i++) {
node = allli[i];
node.onmouseover = function () {
this.className += "current";
}
node.onmouseout = function () {
this.className = this.className.replace("current", "");
}
}
}
window.onload = startList;
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">PS</a>
<ul>
<li class="current"><a href="#">二級菜單列表1</a></li>
<li class="current"><a href="#">二級菜單列表2</a></li>
</ul>
</li>
<li><a href="#">Jave</a>
<ul>
<li class="current"><a href="#">二級菜單列表5</a></li>
<li class="current"><a href="#">二級菜單列表6</a></li>
<li class="current"><a href="#">二級菜單列表7</a></li>
<li class="current"><a href="#">二級菜單列表8</a></li>
<li class="current"><a href="#">二級菜單列表8</a></li>
</ul>
</li>
<li><a href="#">php</a>
<ul>
<li class="current"><a href="#">二級菜單列表9</a></li>
<li class="current"><a href="#">二級菜單列表10</a></li>
<li class="current"><a href="#">二級菜單列表11</a></li>
<li class="current"><a href="#">二級菜單列表12</a></li>
</ul>
</li>
<li><a href="#">.net</a>
<ul>
<li class="current"><a href="#">二級菜單列表13</a></li>
<li class="current"><a href="#">二級菜單列表14</a></li>
<li class="current"><a href="#">二級菜單列表15</a></li>
<li class="current"><a href="#">二級菜單列表16</a></li>
<li class="current"><a href="#">二級菜單列表15</a></li>
<li class="current"><a href="#">二級菜單列表16</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
