这个样子的菜单要怎么弄？

本帖最后由 nply2008 于 2011-03-11 11:35:52 编辑

解决方案 »

  1.   

       这菜单有特别之处 ？  div  css ~~~
      

  2.   

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    if (document.all&&document.getElementById) {
    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>
    <style type="text/css">
    body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
    #menu a { color: #000; text-decoration: none; }
    #menu a:hover { color: #F00; }
    #menu ul { list-style: none; margin: 0px; padding: 0px; }
    #menu ul li { display: inline;background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border: 1px solid #CCC; position:relative; }
    #menu ul li ul { display:none; position: absolute; left:-1px; top: 28px; width:100px; border:0px solid #ccc; border-bottom:none; z-index:65535;}
    #menu ul li.current ul { display:block;}#counter{ width:124px;height:135px;}
    </style>
    </head>
    <body>
    <div id="menu">
    <ul>
    <li><a href="#" onmouseout="change()">计算器</a>
    <ul>
    <li>
    111111111111
    </li>
    <li>
    222222222222
    </li>
    <li>
    333333333333
    </li>
    <li>
    444444444444
    </li>
    </ul>
    </li>
    </ul>
    </div>
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </body>
      

  3.   

     <style type="text/css">
    #buy{width:200px;height:50px;float:left;text-align:center;padding-top:15px;}
    #hr{width:200px;height:50px;float:left;text-align:center;padding-top:15px;margin-left:5px;}
    #vc{width:200px;height:50px;float:left;text-align:center;padding-top:15px;margin-left:5px;}
      </style>
      <script type="text/javascript">
    function show3()
    {
    window.document.getElementById("hidden").style.display="block";
    }
    function hiddenshow3()
    {
    window.document.getElementById("hidden").style.display="none";
    }
      </script>
     </HEAD> <BODY>
     <div style="width:650px;height:50px;background-color:blue">  <div id="buy">网上采购</div> 
      <div style="width:5px;height:40px;background-color:red;margin-top:5px;float:left;"></div>
     
      <div id="hr">人力资源</div>
       <div style="width:5px;height:40px;background-color:red;margin-top:5px;float:left;"></div>  <div id="vc" onmouseover="show3()" onmouseout="hiddenshow3()">视频中心</div>
      </div>
       <div id="hidden" style="width:200px;height:60px;background-color:red;margin-left:420px;display:none">
    <div>a</div>
    <div>b</div>
    <div>c</div>
       </div>
    其实这样的菜单栏可以有很多种做法，就看你怎么弄了。看我的可以给你参考一下不？