下拉菜单无法与％宽度

工作，我有我想要的宽度是动态的一个导航菜单，但是嵌套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

下拉菜单无法与％宽度

回答

相关问题