Question

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

jsFiddle链接显示了所有内容，但是我无法让正文onload隐藏子菜单： jsFiddle

因此，最好也可以查看测试网站：Test Site

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

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

2 个答案: