Question

我想在下拉ul元素上设置相同的高度，但是如何？：）

演示：

jsfiddle.net/DpA2L/

将选项3,4和6悬停在下拉列表中，这些下拉列表的高度不同。有什么想法吗？

编辑：我想要这个：https://dl.dropboxusercontent.com/u/20442642/sce2.jpg

Answer 1

我不知道我是否理解你的问题，但是如果你想让你的扩展菜单具有相同的高度，最简单的方法是确保你有相同数量的元素。

在示例中 - 您的选项3是

<li>
Option 3
<ul>      
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul>     
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

，您的选项4是

<li>
Option 4
<ul>      
    <li class="noHover">Menu heading</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
<ul class="menuText">      
    <li class="noHover">Textfield heading</li>
    <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus tortor, posuere sit amet nisl lobortis, luctus volutpat lorem. 
    </li>

</ul>

尝试添加到您的选项3列表，但没有任何文字。然后一定要将其定位与其他具有“菜单标题”的方式相同。就像在你的CSS中一样。

#menu ul li ul {
padding: 0;
position: absolute;
top: 48px;
(...)
}

再次 - 尝试更准确地问你的问题 - 我不知道我是否理解正确

Answer 2

将此添加到CSS。你为它指定了一个高度，它总是需要它。

#menu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
max-height:300px;
height:300px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
}

在两个绝对位置元素上设置相同的高度

2 个答案: