下拉菜單無法與％寬度

工作，我有我想要的寬度是動態的一個導航菜單，但是嵌套UL李 & UL李一扔了錯誤。下拉菜單無法與％寬度

一切正常除了width屬性：

當我有：#menu UL李{寬度：19％;}和#menu {寬度：45％;}

下拉菜單將無法正確顯示。

但是，當我更改使用寬度：#menu UL立一個{寬度：160像素;}和#menu {寬度：800像素;}

它並正確顯示。

我希望它能夠通過％，因爲它與我的頁面的其餘部分以及使用@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>

來源

2014-10-04 Paul Breen

你可以使用''％，但它應該是確切所以它是文本，如果不重疊它重疊，你可以改變菜單的佈局，就像我已經完成檢查小提琴http://jsfiddle.net/victor_007/ka3z1Ldt/ – 2014-10-04 07:37:36

最好的選擇是不是% - 使用此問題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>

來源

2014-10-04 10:19:24 prog1011

下拉菜單無法與％寬度

回答

相關問題