none
向这样的横向下拉菜单如何让它自适应浏览器的大小(如下图) RRS feed

  • 问题

  • <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>css菜单演示</title>


    <style type="text/css">
    <!--

    *{margin:0;padding:0;border:0;}
    body {
        font-family: arial, 宋体, serif;
            font-size:12px;
    }


    #nav {
         line-height: 24px;  list-style-type: none; background:#666;
    }

    #nav a {
        display: block; width: 80px; text-align:center;
    }

    #nav a:link  {
        color:#666; text-decoration:none;
    }
    #nav a:visited  {
        color:#666;text-decoration:none;
    }
    #nav a:hover  {
        color:#FFF;text-decoration:none;font-weight:bold;
    }

    #nav li {
        float: left; width: 80px; background:#CCC;
    }
    #nav li a:hover{
        background:#999;
    }
    #nav li ul {
        line-height: 27px;  list-style-type: none;text-align:left;
        left: -999em; width: 180px; position: absolute;
    }
    #nav li ul li{
        float: left; width: 180px;
        background: #F6F6F6;
    }


    #nav li ul a{
        display: block; width: 156px;text-align:left;padding-left:24px;
    }

    #nav li ul a:link  {
        color:#666; text-decoration:none;
    }
    #nav li ul a:visited  {
        color:#666;text-decoration:none;
    }
    #nav li ul a:hover  {
        color:#F3F3F3;text-decoration:none;font-weight:normal;
        background:#C00;
    }

    #nav li:hover ul {
        left: auto;
    }
    #nav li.sfhover ul {
        left: auto;
    }
    #content {
        clear: left;
    }


    -->
    </style>

    <script type=text/javascript><!--//--><![CDATA[//><!--
    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? " ": "") + "sfhover";
            }
            sfEls[i].onMouseDown=function() {
            this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
            sfEls[i].onMouseUp=function() {
            this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
            sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

    "");
            }
        }
    }
    window.onload=menuFix;

    //--><!]]></script>

    </head>
    <body>


    <ul id="nav">
    <li><a href="#">首页</a>
    </li>
    <li><a href="#">组织架构</a>
        <ul>
        <li><a href="#">部门管理</a></li>
        <li><a href="#">职位管理</a></li>
        <li><a href="#">岗位管理</a></li>
        </ul>
    </li>
    <li><a href="#">人事管理</a>
        <ul>
        <li><a href="#">新增员工</a></li>
        <li><a href="#">基本资料维护</a></li>
        <li><a href="#">合同管理</a></li>
        <li><a href="#">未签合同员工</a></li>
        <li><a href="#">合同期满提醒</a></li>
        <li><a href="#">试用期转正</a></li>
         <li><a href="#">人事异动</a></li>
          <li><a href="#">员工离职管理</a></li>
           <li><a href="#">离职性质维护</a></li>
            <li><a href="#">离职问卷维护</a></li>
        </ul>
    </li>
    <li><a href="#">奖惩管理</a>
        <ul>
        <li><a href="#">奖惩设置</a></li>
        <li><a href="#">奖惩历史</a></li>
        </ul>
    </li>

    </ul>
    </body>
    </html>

    • 已移动 Sheng Jiang 蒋晟 2009年8月28日 20:19 客户端脚本问题 (发件人:ASP.NET 与 AJAX)
    2009年8月28日 6:52

答案

  • 好像还是有点问题,我的问题是由于导航栏比较长,当浏览器比较宽度比较小的时候有一部分就到第二行了,很难看的,不知道这个该怎么显示
    禁止换行或者在外面放置一个不换行的容器,如table等
    【孟子E章】
    2009年8月28日 7:48
    版主

全部回复

  • 你可以直这样

        <ul style="height:200px;overflow-y:scroll">
        <li><a href="#">新增员工</a></li>
        <li><a href="#">基本资料维护</a></li>
        <li><a href="#">合同管理</a></li>
        <li><a href="#">未签合同员工</a></li>
        <li><a href="#">合同期满提醒</a></li>
        <li><a href="#">试用期转正</a></li>
        <li><a href="#">新增员工</a></li>
        <li><a href="#">基本资料维护</a></li>
        <li><a href="#">合同管理</a></li>
        <li><a href="#">未签合同员工</a></li>
        <li><a href="#">合同期满提醒</a></li>
        <li><a href="#">试用期转正</a></li>
        </ul>

    当然,如果实现自适应,则这个高度是要js动态计算就可以了

    【孟子E章】
    2009年8月28日 7:05
    版主
  • 你也可以这样
    <div style="width:100%; height:24px; background-color:#CCC">
        <ul id="nav">
            <li><a href="#">首页</a>
            </li>
            <li><a href="#">组织架构</a>
                <ul>
                    <li><a href="#">部门管理</a></li>
                    <li><a href="#">职位管理</a></li>
                    <li><a href="#">岗位管理</a></li>
                </ul>
            </li>
            <li><a href="#">人事管理</a>
                <ul>
                    <li><a href="#">新增员工</a></li>
                    <li><a href="#">基本资料维护</a></li>
                    <li><a href="#">合同管理</a></li>
                    <li><a href="#">未签合同员工</a></li>
                    <li><a href="#">合同期满提醒</a></li>
                    <li><a href="#">试用期转正</a></li>
                    <li><a href="#">人事异动</a></li>
                    <li><a href="#">员工离职管理</a></li>
                    <li><a href="#">离职性质维护</a></li>
                    <li><a href="#">离职问卷维护</a></li>
                </ul>
            </li>
            <li><a href="#">奖惩管理</a>
                <ul>
                    <li><a href="#">奖惩设置</a></li>
                    <li><a href="#">奖惩历史</a></li>
                </ul>
            </li>
        </ul>
    </div>


    知识改变命运,奋斗成就人生!
    2009年8月28日 7:23
    版主
  • 好像还是有点问题,我的问题是由于导航栏比较长,当浏览器比较宽度比较小的时候有一部分就到第二行了,很难看的,不知道这个该怎么显示
    2009年8月28日 7:37
  • 学习没有捷径的路 只有一点一滴踏踏实实的 我 建议你不要一下关注那么多 不然到头什么都 不会
    2009年8月28日 7:44
  • 好像还是有点问题,我的问题是由于导航栏比较长,当浏览器比较宽度比较小的时候有一部分就到第二行了,很难看的,不知道这个该怎么显示
    禁止换行或者在外面放置一个不换行的容器,如table等
    【孟子E章】
    2009年8月28日 7:48
    版主