jquery - 使不同的li(父子)具有相同的宽度

Question

我正在创建一个水平的 ul 导航栏。每个 li 元素都有不同的宽度。我想在下拉菜单中做到这一点，下拉菜单中的“子级” li 项的长度/宽度与“父级” li 项的长度/宽度相同。正在考虑使用 jQuery，所以它会是这样的:

jQuery("ul#menu li").width(); = jQuery("ul#menu ul li").width();

这显然行不通，但它有望让我对我正在尝试做的事情有更多的了解。感谢您的帮助。如果可以只使用 CSS 就更好了。

Answer 1

jQuery 似乎是一个糟糕的解决方案。

我会为每个父 li 添加一个类。

<li class="home"><!--nest ul goes here--></li>
<li class="about"><!--nest ul goes here--></li>
<li class="products"><!--nest ul goes here--></li>

然后您可以针对每个人，特别是 child :

.home, .home ul li { width: 150px; }
.about, .about ul li { width: 220px; }
.products, .products ul li { width: 100px; }