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);

 

posted @ 2012-01-30 21:34  lastren  阅读(151)  评论(0)  编辑  收藏  举报