如何使子列表填充流体宽度<li>标签？ （用于导航）</li>

Question

菜单悬停的初始问题已在下面解决，但是我正在研究如何使用<li>标记填充<li>标记的宽度，即使<li><a style="padding: 0 20px;>Test</a></li>标记是流体宽度;

例如<div id="navStore"> <ul id="nav"> <li> <a href="#">Home</a> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </li> <li> <a href="#">Link 2</a> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </li> </ul> </div> <div id="wrapper"></div>

我已经为我想要的菜单系统创建了一个基本设计，但是在重新绘图之后，我决定创建流畅的宽度链接和下拉列表而不是强制宽度。问题是，当悬停在显示下拉列表的链接上时，子链接并排排列而不是从上到下，并且它会将下一个链接从导航系统中抛出。如果有人能指出我的代码错在哪里我会非常感激！

http://jsfiddle.net/vGSgJ/

HTML：

* {
    color: RGB(0, 0, 0);
    font: 14px Arial;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

ul {
    list-style: none;
}

#navStore {
    background: RGB(100, 100, 100);
    height: 35px;
    width: 100%;
}

#nav {
    margin: 0 auto;
    width: 980px;
}

#nav li {
    display: inline-block;
}

#nav li:hover > a {
    background: RGB(255, 255, 255);
    color: RGB(100, 100, 100);
}

#nav li a {
    background: RGB(100, 100, 100);
    color: RGB(255, 255, 255);
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
}

#nav li ul {
    border: 1px solid RGB(0, 0, 0);
    display: none;
    overflow: hidden;
}

#nav li:hover > ul {
    display: block;
}

#nav li ul li {
    float: left;
}

#nav li ul li a {
    background: red;
    float: left;
    height: 20px;
    line-height: 20px;
    width: 100%;
}

#nav li ul li a:hover {
    background: blue;
}

#wrapper {
    margin: 0 auto;
    width: 980px;
}

CSS：

{{1}}

Answer 1

解决方案

将以下内容添加到CSS中：

CSS

#nav li ul{
    position:absolute;
}

#nav li ul li{
    /*This part is already there*/
    float: left;
    /*New content*/
    clear:both;
}

JSFiddle (edit)

---

解释

子列表仍在取代（display:block，position:relative）。 您可以解决此问题，将其位置absolute设置为其父级位置。

clear:both使每个块只有一个元素（水平）

---

的Javascript

Pure vs jQuery specific performance test case

纯粹的方式

var nav = document.getElementById('nav');
var parentWidth = Array();
for(var child in nav.childNodes)
{
    /*If the childNode is an Element Node */
   if(nav.childNodes[child].nodeType ==1)
   {
       var baseWidth = nav.childNodes[child].offsetWidth;
       var ul = nav.childNodes[child].getElementsByTagName('ul')[0];

       ul.style.width = baseWidth;
       /* We want to get the children li elements */
       var ulChildren = ul.getElementsByTagName('li');
       for(var li in ulChildren)
       {
           if(ulChildren[li].nodeType == 1)
           {

               ulChildren[li].style.width = (baseWidth) +"px";
           }
       }  
   }
}

jQuery方式

$.each($('#nav li ul li'),function(){
    var desiredWidth = $(this).parent().siblings('a')[0].offsetWidth;
    $(this).width(desiredWidth);
});