html 嵌套列表

Question

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

Nested List Example

如何修复我的代码，以便实现类似于以下内容的结果？

• 列表项
• 列表项
  • 子列表项
  • 子列表项
  • 子列表项
  • 子列表项
• 列表项

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 从左侧推出，并为其提供您正在寻找的外观。