Question

我有一个导航菜单，我希望宽度是动态的，但嵌套的 ul li ＆amp; ul li a 会引发错误。

除了width属性之外，一切正常：

当我有： #menu ul li {width：19％;} 和 #menu {width：45％;}

下拉菜单无法正确显示。

但是当我使用以下方法更改宽度时： #menu ul li a {width：160px;} 和 #menu {width：800px; }

确实显示正确。

我希望它可以使用％，因为它适用于我的页面的其余部分以及使用@media的较小屏幕。

以下是将数字设置为％的代码：

    <style>
    #menu {
    padding-top: 135px;
    width: 45%;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: 30px;
    }

    #menu ul {
    margin: 0px;
    padding: 0px;
    }

    #menu ul li {
    float: left;
    position: relative;
    list-style-type: none;
    width: 19%;
    }

    #menu ul li a {
    display: block;
    line-height: 30px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    }

    #menu ul ul {
    position: absolute;
    visibility: hidden;
    top: 31px;
    }

    #menu ul li:hover ul {
    visibility: visible;
    }
    </style>
    </head>

    <body>
    <div id="menu">      
    <ul><li><a href="home.html">Home</a></li></ul>

    <ul>
        <li><a href="#">About Us</a>
            <ul>
                <li><a href="whoweare.html">Who We Are</a></li>
                <li><a href="whatwedo.html">What We Do</a></li>
                <li><a href="philosophy.html">Our Philosophy</a></li>
            </ul>
        </li>    
     </ul>

     <ul><li><a href="services.html">Services</a></li></ul>

     <ul><li><a href="portfolio.html">Portfolio</a></li></ul> 

     <ul><li><a href="contact.html">Contact</a></li></ul>
     </div>

Answer 1

最佳选择不是 % - 使用javascript或JQuery来解决此问题（它应该响应设计在任何设备上顺利运行）。

将以下代码放入HTML页面的<head>标记

<script type="text/javascript"> $(document).ready(function () { var w = window.innerWidth; var h = window.innerHeight; if (w > 320 && w < 650) { //aplly css for mobile } else { //apply css for desktop } }); </script>

下拉菜单不使用％width

1 个答案: