怎样把menu都改成横向的？

我用web.sitemap做源生成了一个menu，第一级菜单已经改成横向的了，但是子菜单还是纵向的。
有没有办法把每一级菜单都改成横向伸展？

解决方案 »

  1.   

    http://www.twinhelix.com/dhtml/popupmenu/
    是自定义css   menu，满足兼容性，以及无限级，使用简单，但是太长了，贴不上来，不过好像也是mouseout消矢的...这点你可以改一下了。
      

  2.   

    查了一下好像不行。要不就用div来模拟菜单
      

  3.   

    这点东西还是用简单的DIV来实现吧，合适的东西用在适合的地方
      

  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=gb2312" />
    <title>中国</title>
    <style type="text/css">
    body {
        color: #333;
        background: url(body_bg.jpg) repeat-x #deebf3;
        text-align: center;
        font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
    }
    a:link, a:visited {
        color: #333;
        text-decoration: none;
    }/* Nav
    ==========================================================*/
    .nav {
        position: relative;
        margin: 0 10px 10px;
        background: url(nav_bg.png) no-repeat 0 -36px;
    }
    .navinner {
        background: url(nav_bg.png) no-repeat 100% -72px;
    }
    .navlist {
        height: 36px;
        line-height: 36px;
        overflow: hidden;
        margin: 0 10px;
        background: url(nav_bg.png) repeat-x 0 0;
    }
    .nav li {
        float: left;
        display: inline;
        margin: 0 0 0 -2px;
        padding: 0 4px 0 6px;
        background: url(nav_bg.png) no-repeat 0 -108px;
    }
    .nav a {
        display: block;
        width: 102px;
        text-align: center;
        font-size: 120%;
    }
    .nav a:link, .nav a:visited {
        color: #fff;
    }
    .nav a.current, .nav a:hover, .nav a:active {
        color: #fff;
        font-weight: bold;
        background: url(nav_bg.png) no-repeat 50% -144px;
    }
    .subnav {
        position: absolute;
        top: 41px;
        left: 0;
        float: left;
        height: 27px;
        line-height: 27px;
        white-space: nowrap;
        background: url(nav_bg.png) no-repeat 0 -180px;
    }
    * html .subnav {
        margin: 0 10px 0 -10px; /* IE 6 and below */
    }
    .subnav p {
        padding: 0 10px;
        background: url(nav_bg.png) no-repeat 100% -234px;
    }
    .subnav p span {
        display: block;
        background: url(nav_bg.png) repeat-x 0 -207px;
    }
    .subnav p.pointer {
        position: absolute;
        top: -4px;
        left: 0;
        height: 5px;
        width: 11px;
        padding: 0;
        margin-left: 20px;
        text-indent: -999em;
        background: url(nav_bg.png) repeat-x 0 -261px;
    }
    .subnav a {
        display: inline;
        padding: 0;
        font-size: 100%;
    }
    [class~="subnav"] a {
        padding: 0 3px;
    }
    .subnav, .subnav a:link, .subnav a:visited {
        color: #235e99;
    }
    .subnav a:hover, .subnav a:active {
        color: #235e99;
    }
    .subnav a:hover, .subnav a:active {
        font-weight: normal;
        background: none;
        border-bottom: 2px solid;
    }
    /* subnav position and pointer position */
    #subnav1 { left: 120px; }
    #subnav2 { left: 230px; }
    #subnav3 { left: 340px; }
    #subnav4 { left: 450px; }
    #subnav5, #subnav6, #subnav7 { 
        left: auto;
        right: 0px;
    }#subnav1 .pointer,
    #subnav2 .pointer,
    #subnav3 .pointer,
    #subnav4 .pointer { left: 30px; }
    #subnav5 .pointer { left: auto; right: 290px; }
    #subnav6 .pointer { left: auto; right: 180px; }
    #subnav7 .pointer { left: auto; right: 70px; }#subnav1, #subnav2, #subnav3, #subnav4 {
        min-width: 110px;
    }
    #subnav5 { min-width: 340px; }
    #subnav6 { min-width: 240px; }
    #subnav7 { min-width: 130px; }
    /* Note
    ==========================================================*/
    .note {
        margin: 0 15px 10px;
    color:#666666;
    }
    .note span{
    float:right;
    }
    .disable {
        display: none;
    }

    </style><script>
    function isMatch(str1,str2) 
    {  
    var index = str1.indexOf(str2); 
    if(index==-1) return false; 
    return true; 
    }
    function ResumeError() { 
    return true; 
    } 
    window.onerror = ResumeError; function $(id) {
        return document.getElementById(id);
    }function showMenu (baseID, divID) {
        baseID = $(baseID);
        divID  = $(divID);    //var l = GetOffsetLeft(baseID);
        //var t = GetOffsetTop(baseID);    //divID.style.left = l + 'px';
    //    divID.style.top = t + baseID.offsetHeight + 'px';
        if (showMenu.timer) clearTimeout(showMenu.timer);
    hideCur();
        divID.style.display = 'block';
    showMenu.cur = divID;    if (! divID.isCreate) {
            divID.isCreate = true;
            //divID.timer = 0;
            divID.onmouseover = function () {
                if (showMenu.timer) clearTimeout(showMenu.timer);
    hideCur();
                divID.style.display = 'block';
            };        function hide () {
                showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000);
            }        divID.onmouseout = hide;
            baseID.onmouseout = hide;
        }
    function hideCur () {
    showMenu.cur && (showMenu.cur.style.display = 'none');
    }
    }</script>
    </head>
    <body>
    <div class="nav">
    <div class="navinner">
      <ul class="navlist">
      <li><a href="http://www.qpsh.com">网页特效</a></li>
      <li><a href="/News/Index.html" id="nav_1" onmouseover="showMenu('nav_1','subnav1')">新闻资讯</a>
        <div class="subnav disable" id="subnav1">
          <p class="pointer">.</p>
          <p><span>
          <a href="/News/It/Index.html">业界动态</a> |
          <a href="/News/Invest/Index.html">收购融资</a> |
          <a href="/News/Portals/Index.html">门户动态</a> |
          <a href="/News/Search/Index.html">搜索引擎</a> |
          <a href="/News/Game/Index.html">网络游戏</a> |
          <a href="/News/Biz/Index.html">电子商务</a> |
          <a href="/News/Media/Index.html">广告传媒</a> |
          <a href="/News/Soft/Index.html">厂商开发</a>
          </span></p>
        </div>  
      </li>
      <li><a href="/Webmaster/Index.html" id="nav_2" onmouseover="showMenu('nav_2','subnav2')">站长在线</a>
        <div class="subnav disable" id="subnav2">
         <p class="pointer">.</p>
          <p><span>
          <a href="/Webmaster/RecSite/Index.html">好站推荐</a> |
          <a href="/Webmaster/Gather/Index.html">站长聚会</a> |
          <a href="/Webmaster/Visit/Index.html">站长访谈</a> |
          <a href="/Webmaster/Club/Index.html">站长茶馆</a> |
          <a href="/Webmaster/Topsite/Index.html">网站排行</a>
          </span></p>
        </div>
      </li>
      <li><a href="/Webbiz/Index.html" id="nav_3" onmouseover="showMenu('nav_3','subnav3')">网站运营</a>
        <div class="subnav disable" id="subnav3">
          <p class="pointer">.</p>
          <p><span>
          <a href="/Webbiz/Exp/Index.html">建站经验</a> |
          <a href="/Webbiz/BizPlan/Index.html">策划盈利</a> |
          <a href="/Webbiz/Seo/Index.html">搜索优化</a> |
          <a href="/Webbiz/Promot/Index.html">网站推广</a> |
          <a href="/Webbiz/Free/Index.html">免费资源</a>
          </span></p>
        </div>  
      </li>
      <li><a href="/Design/Index.html" id="nav_4" onmouseover="showMenu('nav_4','subnav4')">设计在线</a>
        <div class="subnav disable" id="subnav4">
          <p class="pointer">.</p>
          <p><span>
          <a href="/Design/Coolsite/Index.html">酷站推荐</a> |
          <a href="/Design/Pages/Index.html">网页设计</a> |
          <a href="/Design/Rules/Index.html">WEB标准</a> |
          <a href="/Design/Video/Index.html">视频处理</a> |
          <a href="/Design/Activity/Index.html">设计活动</a>
          </span></p>
        </div>  
      </li>
      <li><a href="/Program/Index.html" id="nav_5" onmouseover="showMenu('nav_5','subnav5')">网络编程</a>
        <div class="subnav disable" id="subnav5">
          <p class="pointer">.</p>
          <p><span>
          <a href="/Program/Asp/Index.html">Asp编程</a> |
          <a href="/Program/Php/Index.html">Php编程</a> |
          <a href="/Program/.Net/Index.html">.Net编程</a> |
          <a href="/Program/Xml/Index.html">Xml编程</a> |
          <a href="/Program/Access/Index.html">Access</a> |
          <a href="/Program/Mssql/Index.html">Mssql</a> |
          <a href="/Program/Mysql/Index.html">Mysql</a>
          </span></p>
        </div>  
      </li>
      <li><a href="/Union/Index.html" id="nav_6" onmouseover="showMenu('nav_6','subnav6')">联盟资讯</a>
        <div class="subnav disable" id="subnav6">
          <p class="pointer">.</p>
          <p><span>
          <a href="/Union/News/Index.html">联盟新闻</a> |
          <a href="/Union/Intro/Index.html">联盟介绍</a> |
          <a href="/Union/Comment/Index.html">联盟点评</a> |
          <a href="/Union/Skill/Index.html">网赚技巧</a>
          </span></p>
        </div>
      </li>
      <li><a href="/Server/Index.html" id="nav_7" onmouseover="showMenu('nav_7','subnav7')">服务器</a>
        <div class="subnav disable" id="subnav7">
          <p class="pointer">.</p>
          <p><span>
          <a href="/Server/Web/Index.html">Web服务器</a> |
          <a href="/Server/Ftp/Index.html">Ftp服务器</a> |
          <a href="/Server/Mail/Index.html">Mail服务器</a> |
          <a href="/Server/Dns/Index.html">Dns服务器</a> |
          <a href="/Server/Win/Index.html">Win服务器</a> |
          <a href="/Server/Linux/Index.html">Linux服务器</a> |
          <a href="/Server/Safe/Index.html">安全防护</a>
          </span></p>
        </div>  
      </li>
      </ul>
    </div>  
    </div>
    </body>
    </html>
      

  5.   

    用.net的menu控件的话应该很难，自己用js搞吧