IT精英俱乐部

方便自己查阅,仅此而已!

统计

留言簿(4)

阅读排行榜

评论排行榜

横向级联菜单

<!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=utf-8" />

<title> ĵ</title>

<style>

body {

  margin: 7px;

  font:12px Verdana, Arial, Helvetica, sans-serif;

}

* {

  list-style-type: none;

  margin: 0px;

  padding: 0px;

  border: thin none;

}

#nav {

  position: absolute;

  font-size: 9px;

  opacity: 0.8;

}

#nav a {

  display: block;

  width: 100px;

  height: 15px;

  padding: 3px 5px 12px;

  background: #666;

  color: #fff;

  text-decoration: none;

}

#nav a:hover {

  background: #333;

}

#nav li {

  width: 120px;

  height:30px;

  overflow:hidden;

  background: #ccc;

  padding-bottom: 3px;

}

#nav ul {

  position: absolute;

  margin-left: 110px;

  margin-top: -30px;

}

html>body #nav ul {

  margin-left: 119px;

  margin-top: -39px;

}

#nav ul {

  display: none;

}

#nav li.show ul {

  display: block;

}

#nav li.show li ul {

  display: none;

}

#nav li li.show ul {

  display: block;

}

</style>

<script language="javascript" type="text/javascript">

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? " ": "") + "show";

    }

    sfEls[i].onmouseout=function() {

      this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");

    }

  }

}

window.onload=menuFix;

</script>

</head>

 

<body>

<ul id="nav">

  <li><a href="#">nav item</a>.

    <ul>

      <li><a href="#">nav item</a>.

        <ul>

          <li><a href="#">nav item</a>.</li>

          <li><a href="#">nav item</a>.</li>

        </ul>

      </li>

      <li><a href="#">nav item</a>.

        <ul>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

        </ul>

      </li>

      <li><a href="#">nav item</a>.

        <ul>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

        </ul>

      </li>

      <li><a href="#">nav item</a>.

        <ul>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

          <li><a href="#">nav item</a></li>

        </ul>

      </li>

    </ul>

  </li>

  <li><a href="#">nav item</a>.

    <ul>

      <li><a href="#">nav item</a></li>

      <li><a href="#">nav item</a></li>

      <li><a href="#">nav item</a></li>

      <li><a href="#">nav item</a></li>

      <li><a href="#">nav item</a></li>

      <li><a href="#">nav item</a></li>

    </ul>

  </li>

  <li><a href="#">nav item</a>.

    <ul>

      <li><a href="#">nav item</a></li>

      <li><a href="#">nav item</a></li>

      <li><a href="#">nav item</a></li>

      <li><a href="#">nav item</a></li>

      <li><a href="#">nav item</a></li>

      <li><a href="#">nav item</a></li>

    </ul>

  </li>

</ul>

</body>

</html>

posted on 2008-11-20 13:19 suplayer 阅读(219) 评论(0)  编辑  收藏 所属分类: Java Web


只有注册用户登录后才能发表评论。


网站导航: