jquery - 如何阻止 li 宽度匹配其子 li

Question

希望我一直在处理这个菜单的最后一部分。它的子菜单下拉菜单像导航的主要部分一样水平，但是每个 li 的子 li 都会变大，粗略，问题是父级试图匹配它的子 li 的宽度。我尝试将子 li 宽度保持在自动状态并为父级分配宽度，但要么我选择了所有错误的数字，要么它不起作用，因为每次我为父级分配宽度时，它都会使下拉菜单变为垂直. 每次我在 ftp 上发送时，我的主机服务器似乎也没有正确更新，因此输入随机大小并查看我需要匹配的内容变得非常困难。

jsFiddle 链接显示了这一切，但我无法让 body onload 隐藏子菜单来工作： jsFiddle

所以最好也查看测试站点：测试站点

Answer 1

在这种情况下，您需要维护父子层次结构，例如 -

#navigation li ul.sub_navigation li{......}

更新的小提琴 - http://jsfiddle.net/eETjb/2/

Answer 2

嘿，我想你应该想要下拉菜单

我创建了一些示例检查它

HTML

<ul class="navi">
  <li><a href="#">Home</a></li>
  <li><a href="#">Home2</a></li>
  <li><a href="#">Home3</a>

    <ul class="submenu">
    <li><a href="#">Home</a></li>
  <li><a href="#">Home2</a></li>
  <li><a href="#">Home3</a></li>
  <li><a href="#">Home4</a></li>
  <li><a href="#">Home5</a></li>
    </ul>

  </li>
  <li><a href="#">Home4</a></li>
  <li><a href="#">Home5</a></li>

</ul>

CSS

ul, ul li{
margin:0;
  padding:0;
}
.navi, .submenu{
  list-style:none;
  display:block;
  margin:0;
  padding:0;
}
.navi > li{
background:green;
  display:inline-block;
  vertical-align:top;
  position:relative;
}
.navi li a{
color:white;
  padding:10px;
  display:block;
  text-decoration:none;
}
.navi li .submenu{
display:none;
  position:absolute;
  top:39px;
  left:0;
}
.navi li:hover .submenu{
display:block;
}
.submenu > li{
display:block;
background:red;
}

.submenu li > a{
border-top:2px solid black;
display:block;
}

现场演示http://tinkerbin.com/GoDsKf4n