使弹出菜单高度与主菜单相同

Question

我正在设计一个弹出菜单，并希望使子菜单的高度与主菜单的高度相同。

这是我正在处理的菜单的 html 代码

<ul id="nav">
    <li class="button"><a>Sub menu title 1</a>
        <ul>
            <li><a>Link1</a></li>
            <li><a>Submenu2</a></li>
        </ul>
    </li>
    <li class="button"><a>Sub menu title 2</a>
        <ul>
            <li><a>Link4</a></li>
            <li><a>Submenu5</a></li>
        </ul>
    </li>
    <li class="button"><a>Sub menu title 3</a>
        <ul>
            <li><a>Link</a></li>
            <li><a>Submenu</a></li>
        </ul>
    </li>
</ul>

和css

#nav {
top: 50%;
left: 0;
width: 200px;
border: 1px solid #000;
}
#nav ul {
width: 200px;
background: #f9f9f9;
position: absolute;
left: -9999em;
}
#nav a {
display: block;
padding: 5px 10px;
}
#nav ul li {
position: relative;
}
#nav li:hover ul {
left: 200px;
top: 0;
}
#nav li:hover > a {
cursor: pointer;
}
.button a {
display: block;
padding: 5px 10px;
}

这是小提琴 (https://jsfiddle.net/9mqy3r4q/)。

有没有办法让弹出的高度等于主菜单的高度

Answer 1

您可以使用height css 属性：

#nav {
    top: 50%;
    left: 0;
    width: 200px;
    border: 1px solid #000;
    height: 100px;
}
#nav ul {
    width: 200px;
    background: #f9f9f9;
    position: absolute;
    left: -9999em;
    height: 100px;
}

Answer 2

您已将 JQuery 标记添加到问题中，因此为此提供 JQuery 解决方案。

console.log($('#nav').height())
var nav_height = $('#nav').height();
$('#nav ul').each(function(){
	$(this).css('height', nav_height+'px');
})

#nav {
top: 50%;
left: 0;
width: 200px;
border: 1px solid #000;
}
#nav ul {
width: 200px;
background: #f9f9f9;
position: absolute;
left: -9999em;
}
#nav a {
display: block;
padding: 5px 10px;
}
#nav ul li {
position: relative;
}
#nav li:hover ul {
left: 200px;
top: 0;
}
#nav li:hover > a {
cursor: pointer;
}
.button a {
display: block;
padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
    <li class="button"><a>Sub menu title 1</a>
        <ul>
            <li><a>Link1</a></li>
            <li><a>Submenu2</a></li>
        </ul>
    </li>
    <li class="button"><a>Sub menu title 2</a>
        <ul>
            <li><a>Link4</a></li>
            <li><a>Submenu5</a></li>
        </ul>
    </li>
    <li class="button"><a>Sub menu title 3</a>
        <ul>
            <li><a>Link</a></li>
            <li><a>Submenu</a></li>
        </ul>
    </li>
</ul>

Answer 3

只需添加您的 CSS：

.button {
    position:relative;
}