1

菜单悬停的最初问题在下面解决了，但是我正在寻找使下拉列表填充标签宽度的方法，<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;
}
4

1 回答 1

2

解决方案

将以下内容添加到您的 CSS 中：

CSS

#nav li ul{
    position:absolute;
}

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

JSFiddle（编辑）

解释

子列表仍在取代它们的位置，( display:block, position:relative)。您可以解决此问题，将他们的位置设置absolute为他们父母的位置。

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

Javascript

Pure vs jQuery 具体性能测试用例

纯粹的方式

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);
});
于 2013-06-11T14:32:04.320 回答