3

我正在构建一个像这样的 jsfiddle 的 CSS 菜单：http: //jsfiddle.net/YXT7j/48/

HTML：

<ul id="nav">
<li><a>item 1</a>
    <ul class="sub" style="width: 200px;">
        <li><a>item 1.1</a>
            <ul>
                <li><a>item 1.1.1</a></li>
                <li><a>item 1.1.2</a></li>
                <li><a>item 1.1.3</a></li>
            </ul>
        </li>
        <li><a>item 1.2</a>
            <ul>
                <li><a>item 1.1.1</a></li>
                <li><a>item 1.1.2</a></li>
                <li><a>item 1.1.3</a></li>
            </ul>           
        </li>
    </ul>
</li>
<li><a>item 2</a>
    <ul class="sub">
        <li><a>item 2.1</a></li>
        <li><a>item 2.2</a></li>
        <li><a>item 2.3</a></li>
    </ul>  
</li>
<li><a>item 3</a>
    <ul class="sub">
        <li><a>item 3.1</a></li>
        <li><a>item 3.2</a></li>
        <li><a>item 3.3</a></li>
    </ul>  
</li>
</ul>

CSS：

#nav>li {
    float: left; 
    margin: 0 10px;   
    position: relative;   
}
.sub {
    display: none;    
    position: absolute;
    top: 1em;
    left: 0;
}
.sub>li {
    float: left; 
    width: 100px;        
}
#nav>li:hover .sub {
    display: block;
}

​ ​</p>

在第 1 项下，您可以看到 2 个列表彼此相邻。同样在 html 中，您会看到一个内联宽度集。如果没有内联宽度（或等效的 css），列表将显示在彼此下方而不是彼此相邻（http://jsfiddle.net/YXT7j/34/）。

现在子菜单中的列表数量是动态的。这就是为什么我不能在 css 中设置宽度，而我现在使用的是内联样式（100*numlists+'px'）。但这只是丑陋的。我希望子菜单像任何其他元素一样调整为其 li-children 的大小。不幸的是，如果没有设置宽度，子菜单将遵循其父菜单项的宽度。

所以，tl/dr：如何在 ul.sub 上不设置明确宽度的情况下获得http://jsfiddle.net/YXT7j/48/ 。

谢谢！

4

2 回答 2

5

这是我的解决方案的 js-fiddle：http: //jsfiddle.net/YXT7j/66/

您必须在子菜单内联块中制作列表，而不是浮动它们。然后你告诉子菜单不要用空格包装内联项目： nowrap;

这是我以前在其他问题上看到的类似答案。尽管这些答案是为了防止文本（该标准是内联的）包装，而不是完整的块元素。

因此，为了完整起见，代码：

<ul id="nav">
    <li><a>item 1</a>
        <ul class="sub multi">
            <li><a>item 1.1</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>
            </li>
            <li><a>item 1.2</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>           
            </li>
        </ul>
    </li>
    <li><a>item 2</a>
        <ul class="sub">
            <li><a>item 2.1</a></li>
            <li><a>item 2.2</a></li>
            <li><a>item 2.3</a></li>
        </ul>  
    </li>
    <li><a>item 3</a>
        <ul class="sub">
            <li><a>item 3.1</a></li>
            <li><a>item 3.2</a></li>
            <li><a>item 3.3</a></li>
        </ul>  
    </li>
</ul>
​

​</p> 

#nav>li {
    float: left; 
    margin: 0 10px;   
    position: relative;   
}
.sub {
    display: none;    
    position: absolute;
    top: 1em;
    left: 0;

    white-space: nowrap;
}
.sub>li {
    width: 100px;   
}
.multi.sub>li { 
    display: inline-block;
}
#nav>li:hover .sub {
    display: block;
}

​</p>

于 2012-10-30T12:33:27.380 回答
2

当您等待更好的答案时，一个 hacky 解决方案是这样做：

#nav>li:hover .sub {
    display: block;
    width:1000%;
}

http://jsfiddle.net/YXT7j/39/

于 2012-10-29T13:24:16.543 回答