Question

我正在尝试使用嵌套列表构建导航菜单，但每当我设置li的高度时它会打破列表并且子菜单位于最终的li上，我链接到我的意思，

如何修复我的代码，以便实现与以下类似的功能？

列表项
列出项目
- 子列表项
- 子列表项
- 子列表项
- 子列表项
列表项

Answer 1

将CSS更改为此。

.seconday_nav {
  width: 95px;
  float: left;
  margin: 32px 0px 0px 0px;
}
ul.subnav {
   margin-left: 60px;
}
.seconday_nav ul.subnav li {
    width: 93px;
    text-align: right;
    padding: 10px 0px;
    border: 1px solid green;
    display: block;
    height: 25px;
}
.seconday_nav ul li a, .seconday_nav ul.subnav li a {
      background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5));
      background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%);
      display: block;
      width: 100%;
      height: 100%;
      padding: 0px 10px 0px 10px;
}

我做了什么，只在你的子导航上留下60左边距。这样就可以从左侧推出UL，并为其提供外观。

Answer 2

这里有几个问题：

.seconday_nav {
  width: 95px;
  float: left;
  margin: 32px 0px 0px 0px; }
  .seconday_nav ul li, .seconday_nav ul.subnav li {
    width: 93px;
    text-align: right;
    padding: 10px 0px;
    border: 1px solid green;
    display: block;
    height: 25px; } /* PROBLEM 1 */
    .seconday_nav ul li a, .seconday_nav ul.subnav li a {
      background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5));
      background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%);
      display: block;
      width: 100%; /* PROBLEM 2 */
      height: 100%;
      padding: 0px 10px 0px 10px; }

问题1：您给予包含所有子列表项的元素25px的高度.seconday_nav ul li影响包含subnav的li。

问题2：你正在给宽度被声明为100％的元素填充，它总是给出100％的父+填充，所以它溢出父。由于您已经提供a个元素display: block，因此无需为它们提供100％的宽度，只需要高度。

这应该可以帮助您解决问题：）

html嵌套列表

2 个答案: