求一个能重复使用好看点的下拉菜单

谢谢了

解决方案 »

  1.   

    <!-- saved from url=file://C:/Documents and Settings/yfq/桌面/漂亮的下拉菜单.html -->
    <script>
    window.onerror = new Function("return(false);")
    </script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>WebForm5</TITLE>
    <STYLE>/* Root = Horizontal, Secondary = Vertical */
    ul#navmenu-h {
      margin: 0;
      border: 0 none;
      padding: 0;
      width: 500px; /*For KHTML*/
      list-style: none;
      height: 24px;
    }ul#navmenu-h li {
      margin: 0;
      border: 0 none;
      padding: 0;
      float: left; /*For Gecko*/
      display: inline;
      list-style: none;
      position: relative;
      height: 24px;
    }ul#navmenu-h ul {
      margin: 0;
      border: 0 none;
      padding: 0;
      width: 160px;
      list-style: none;
      display: none;
      position: absolute;
      top: 24px;
      left: 0;
    }ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
      clear: both;
      display: block;
      font: 1px/0px serif;
      content: ".";
      height: 0;
      visibility: hidden;
    }ul#navmenu-h ul li {
      width: 160px;
      float: left; /*For IE 7 lack of compliance*/
      display: block !important;
      display: inline; /*For IE*/
    }/* Root Menu */
    ul#navmenu-h a {
      border: 1px solid #FFF;
      border-right-color: #CCC;
      border-bottom-color: #CCC;
      padding: 0 6px;
      float: none !important; /*For Opera*/
      float: left; /*For IE*/
      display: block;
      background: #EEE;
      color: #666;
      font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
      text-decoration: none;
      height: auto !important;
      height: 1%; /*For IE*/
    }/* Root Menu Hover Persistence */
    ul#navmenu-h a:hover,
    ul#navmenu-h li:hover a,
    ul#navmenu-h li.iehover a {
      background: #CCC;
      color: #FFF;
    }/* 2nd Menu */
    ul#navmenu-h li:hover li a,
    ul#navmenu-h li.iehover li a {
      float: none;
      background: #EEE;
      color: #666;
    }/* 2nd Menu Hover Persistence */
    ul#navmenu-h li:hover li a:hover,
    ul#navmenu-h li:hover li:hover a,
    ul#navmenu-h li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover a {
      background: #CCC;
      color: #FFF;
    }/* 3rd Menu */
    ul#navmenu-h li:hover li:hover li a,
    ul#navmenu-h li.iehover li.iehover li a {
      background: #EEE;
      color: #666;
    }/* 3rd Menu Hover Persistence */
    ul#navmenu-h li:hover li:hover li a:hover,
    ul#navmenu-h li:hover li:hover li:hover a,
    ul#navmenu-h li.iehover li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover li.iehover a {
      background: #CCC;
      color: #FFF;
    }/* 4th Menu */
    ul#navmenu-h li:hover li:hover li:hover li a,
    ul#navmenu-h li.iehover li.iehover li.iehover li a {
      background: #EEE;
      color: #666;
    }/* 4th Menu Hover */
    ul#navmenu-h li:hover li:hover li:hover li a:hover,
    ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
      background: #CCC;
      color: #FFF;
    }ul#navmenu-h ul ul,
    ul#navmenu-h ul ul ul {
      display: none;
      position: absolute;
      top: 0;
      left: 160px;
    }/* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu-h li:hover ul ul,
    ul#navmenu-h li:hover ul ul ul,
    ul#navmenu-h li.iehover ul ul,
    ul#navmenu-h li.iehover ul ul ul {
      display: none;
    }ul#navmenu-h li:hover ul,
    ul#navmenu-h ul li:hover ul,
    ul#navmenu-h ul ul li:hover ul,
    ul#navmenu-h li.iehover ul,
    ul#navmenu-h ul li.iehover ul,
    ul#navmenu-h ul ul li.iehover ul {
      display: block;
    }</STYLE><SCRIPT language=javascript>
    navHover = function() {
        var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
        for (var i=0; i<lis.length; i++) {
            lis[i].onmouseover=function() {
                this.className+=" iehover";
            }
            lis[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" iehover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", navHover);
            </SCRIPT>
    </HEAD><BODY><!--StartFragment--><UL id=navmenu-h>
    <LI class=""><A href="file:///C:/Documents%20and%20Settings/yfq/桌面/漂亮的下拉菜单.html#">Root nav item1</A> 
    <UL>
    <LI><A href="file:///C:/Documents%20and%20Settings/yfq/桌面/漂亮的下拉菜单.html#">Sub nav item1</A> </LI>
    <LI><A href="file:///C:/Documents%20and%20Settings/yfq/桌面/漂亮的下拉菜单.html#">Sub nav item1-2</A> </LI></UL></LI>
    <LI class=""><A href="file:///C:/Documents%20and%20Settings/yfq/桌面/漂亮的下拉菜单.html#">Root nav item2</A> 
    <UL>
    <LI class=""><A href="file:///C:/Documents%20and%20Settings/yfq/桌面/漂亮的下拉菜单.html#">Sub nav item2</A> </LI>
    <LI><A href="file:///C:/Documents%20and%20Settings/yfq/桌面/漂亮的下拉菜单.html#">Sub nav item2-2</A> </LI></UL></LI>
    <LI class=""><A href="file:///C:/Documents%20and%20Settings/yfq/桌面/漂亮的下拉菜单.html#">Root nav item3</A> 
    <UL>
    <LI class=""><A href="file:///C:/Documents%20and%20Settings/yfq/桌面/漂亮的下拉菜单.html#">Sub nav item3</A> </LI>
    <LI class=""><A href="file:///C:/Documents%20and%20Settings/yfq/桌面/漂亮的下拉菜单.html#">Sub nav item3-2</A> </LI></UL></LI></UL><!--EndFragment--></BODY>
    </HTML>
      

  2.   

    http://www.cnblogs.com/kingeric/archive/2007/01/10/616542.html
    http://www.cnblogs.com/zss1100/articles/663460.html