html - 如何使子列表填充流体宽度 标签？ (用于导航)

Question

菜单悬停的最初问题已在下面解决，但是我正在寻找使下拉列表填充 <li> 宽度的方法。标记即使 <li>标签是流动宽度；

例如 <li><a style="padding: 0 20px;>Test</a></li>

我已经为我的网站创建了一个基本的菜单系统设计，但是在重新起草之后，我决定创建可变宽度的链接和下拉列表，而不是强制宽度。问题是，将鼠标悬停在链接上以显示下拉列表时，子链接并排排列而不是从上到下排列，并且它还会将下一个链接抛出导航系统。如果有人能指出我的代码哪里有问题，我将非常感激!

http://jsfiddle.net/vGSgJ/

HTML:

<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>

CSS:

* {
    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;
}

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 设置为他们 parent 的位置。

clear:both 使得每个 block (水平)只有一个元素

---

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);
});