下拉菜单无法与%宽度
问题描述:
工作,我有我想要的宽度是动态的一个导航菜单,但是嵌套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>
答
最好的选择是不是%
- 使用此问题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>
你可以使用''%,但它应该是确切所以它是文本,如果不重叠它重叠,你可以改变菜单的布局,就像我已经完成检查小提琴http://jsfiddle.net/victor_007/ka3z1Ldt/ – 2014-10-04 07:37:36