jquery - 获取与主菜单相同的弹出菜单高度

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

这是 fiddle ( 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;
}