Question

我非常绝望，因为我的代码中有一个错误，我无法弄明白。我用谷歌搜索了几个小时，我尝试了一切，但我真的不知道，该做什么。

    <div id='navi'>
     <ul class='level-1'>
        <li class='level-1'><a href='url'>HOME</a>
        </li>
        <li class='level-1'><a href='odkaz'>ITEM 1</a>
            <ul class='level-2'>
                <li class='level-2'><a href='odkaz'>SUB ITEM 1</a></li>
                <li class='level-2'><a href='odkaz'>SUB ITEM 2</a></li>
                <li class='level-2'><a href='odkaz'>SUB ITEM 3</a></li>
                <li class='level-2'><a href='odkaz'>SUB ITEM 4</a></li>
            </ul>
        </li>
        <li class='level-1'><a href='odkaz'>ITEM 2</a>
            <ul class='level-2'>
                <li class='level-2'><a href='odkaz'>SUB ITEM 5</a></li>
                <li class='level-2'><a href='odkaz'>SUB ITEM 6</a></li>
                <li class='level-2'><a href='odkaz'>SUB ITEM 7</a></li>
                <li class='level-2'><a href='odkaz'>SUB ITEM 8</a></li>
                <li class='level-3'><a href='odkaz'>SUB-SUB ITEM 1</a></li>
                <li class='level-3'><a href='odkaz'>SUB-SUB ITEM 2</a></li>
                <li class='level-3'><a href='odkaz'>SUB-SUB ITEM 3</a></li>
            </ul>
         </li>
         <li class='level-1'><a href='odkaz'>ITEM 3</a>
            <ul class='level-2'>
                <li class='level-2'><a href='odkaz'>ITEM 9</a></li>
                <li class='level-2'><a href='odkaz'>ITEM 10</a></li>
            </ul>
        </li>
     <li class='level-1'><a href='odkaz'>ITEM 4</a></li>
    </ul>
  </div>
    <div style='clear:both'></div>

这是css：

  #navi{
  width: 1100px;
  height: 50px;
  margin: auto;
  background: #1c1c1d; 
}

#navi ul{
  margin: 0;
  padding: 0px;
}

#navi li{
  list-style: none;
  margin: 0;
  padding: 0;
}

#navi li.level-1{
  float: left;
}

#navi li.level-1 a{
  display: block;
  padding: 16px;
  color: #aca4a4;
  font-weight: bold;
  text-decoration: none;
}

#navi li.level-2 a{
  color: #aca4a4;
  padding: 0px;
  margin: 10px;
}

#navi ul.level-2{
  position: absolute;
  display: none;
z-index: 2; 
}

#navi li.level-3 a{
  color: #aca4a4;
  padding: 0px;
  margin: 10px;
}

#navi ul.level-3{
  position: absolute;
  display: none;
z-index: 2; 
}

#navi li.level-1:hover ul.level-2{
  display: block;
  background-color: #25203d;
}

#navi li.level-1:hover{
  background-color: #25203d;
}

我不知道如何将第3级与第2级分开。如果我将另一个ul直接放在子项8下，或者使用它：

#navi li.level-2:hover ul.level-3{
  display: block;
  background-color: #25203d;
}

当我将鼠标悬停在子项目5上时，会出现子子菜单（子项目1,2和3），但是当将鼠标悬停在子项目8上时它会出现。我的菜单几乎准备就绪，我恐怕不得不从现在开始:(。因为这个最后一个错误，我在某个地方做了。你能帮助我放另一个ul或者如何向右悬停吗？

而且我也不知道如何强制子子菜单出现在子项目的右侧，我只能在子项目下看到它：（。

我发现了这个http://cssmenumaker.com/并且我使用了模板，但是为了改变一切，可能需要几个小时:(。再次:(。所以如果有人可以帮助我使用我当前的代码，那就太棒了:)。

Answer 1

我不确定您是希望子子菜单向下打开还是向侧面打开。这段代码将使它们横向开放，因为这似乎是最常见的设计。

FIDDLE

以与子项目相同的方式嵌套子项目。

    <li class='level-1'><a href='odkaz'>ITEM 2</a>
        <ul class='level-2'>
            <li class='level-2'><a href='odkaz'>SUB ITEM 5</a></li>
            <li class='level-2'><a href='odkaz'>SUB ITEM 6</a></li>
            <li class='level-2'><a href='odkaz'>SUB ITEM 7</a>
                <ul class='level-3'>
                    <li class='level-3'><a href='odkaz'>SUB-SUB ITEM 1</a></li>
                    <li class='level-3'><a href='odkaz'>SUB-SUB ITEM 2</a></li>
                    <li class='level-3'><a href='odkaz'>SUB-SUB ITEM 3</a></li>
                </ul>
            </li>
            <li class='level-2'><a href='odkaz'>SUB ITEM 8</a></li>
        </ul>
    </li>

在CSS中，如果相应的级别2 li（包裹级别3 ul）或级别3 ul本身悬停在上面，则使级别2可见。

#navi li.level-2:hover ul.level-3, ul.level-3:hover {
    display: block;
    position: absolute;
    top: -1px;
    left: 100px;
    width: 150px;
    background-color: #25203d;
}

上面的CSS还提供了一些内容，使得3级列表显示在打开它的2级项目旁边。我现在只有任意像素值。为了使其可靠地工作，您必须为2级下拉菜单设置固定宽度，然后根据该宽度设置left:。

你还必须将2级li的位置设置为静态以外的其他位置，以便3级的绝对位置将基于它。（位置：绝对使位置相对于具有静态位置的元素的第一个父级。）

#navi li.level-2:hover {
    position: relative;
    top: 0;
    left: 0;
}

CSS水平子菜单问题

1 个答案: