suckerfish（css）
1,HTML
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>NAVIGATION BAR</title>
<link rel="stylesheet" type="text/css" href="css/navibar.css">
<script language="JavaScript" src="js/suckfish.js"></script>
</head>
<body>
<ul id="nav">
<li>menu1
<ul>
<li><a href="">11</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li><a href="">14</a></li>
</ul>
</li>
<li>menu2
<ul>
<li><a href="">21</a></li>
<li><a href="">22</a></li>
<li><a href="">23</a></li>
</ul>
</li>
</ul>
</body>
</html>
2,列表项格式调整
#nav, #nav ul {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
border:1px solid #808080;
background-color:#4682b4; /*no effect，被li的背景颜色覆盖掉了，可继承，深蓝*/
}
#nav li {
float: left;
width: 10em;
margin-left:3px; /*设置改值可看到ul的背景颜色*/
border: 0.3px solid #C0C0C0;
background-color:#87cefa;/*可继承，浅蓝*/
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav a {
display: block;
color: #000000;
line-height:20px;
text-decoration: none;
}
#nav li:hover ul, #nav li.sfhover ul {
/*不设置则继承上面的ul的背景颜色*/
left: auto;
}
#nav a:hover,
#nav a:focus{
color:#ffff00;
background-color:#4682b4;
}
3,js补充
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
