Question

我使用CSS优化的无序HTML列表...

HTML：

    <div id="menuContainer">
      <ul class="products">
        <li>Juices
          <ul>
            <li>Orange</li>
            <li>Apple</li>
          </ul>
        </li>
        <li>Sweets
          <ul>
            <li>Chocolate</li>
            <li>Jelly Beans</li>
          </ul>
        </li>
      </ul>
    </div>

CSS的部分内容：

    .menu .products, 
    .menu .products ul {
      list-style: none;
     }

     .menu li:hover .products a {
       display:block;
     }

     .menu .products a {
       width: 200px;
     }

     .menu .products li {
       position: relative;
       float: none;
       vertical-align: middle;
       height: 30px;
     }

     .menu .products li ul {
       position: absolute;
       left: -999em;
       width: 200px;
     }

     .menu .products li:hover ul {
       top: 0;
       left: 200px;
       padding-left: 50px;
     }

...作为一个网站菜单，想要显示如下：第一级元素（果汁，糖果）应该全部列在彼此之下（已经可以正常工作）和每个元素的第二级应该显示在它们旁边，但都在同一个固定位置。将它视为右侧的固定框，表示“我包含每个第二级元素”。当然这可以很容易地完成，第二级得到“位置：固定;顶部：x;左; x”但我的问题是这个菜单滚动页面。我现在的问题是，是否有任何方法可以修复第二级但不是页面而是菜单容器？否则，据我所知，它的位置是以其顶级元素为基础的。

有什么想法吗？

Answer 1

我不完全明白你的意思，但我猜你想要以下内容：

菜单结构应该是固定的
您不希望在滚动时修复菜单

我猜你需要一个容器div来保存菜单，如下所示：

<div class="wrapper">
  <div class="container-menu">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </div>
</div>

CSS：

.wrapper {

  position:relative;

}

.container-menu {

   position:absolute;
   margin: // position it here

}

这将确保您的菜单绝对位于整个网站周围相对定位的包装中。

有关绝对和相对位置的更多信息，请参阅this

Answer 2

如果我理解正确，您希望子菜单显示在父<li>右侧吗？如果是这样，那么您的子菜单<ul>必须位于您的父<li>内，然后您可以在子菜单<ul>中添加这样的内容。 position:absolute; left:0px; top:0px;并记得将position:relative;放在您的父<li>

上

每个HTML无序列表元素的第二级在同一个固定位置

2 个答案: