CSS水平子菜单问题

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中，如果相应的level 2 li (包装level 3 ul)或level 3 ul本身悬停在其上，则使level 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还包含一些内容，以使level 3列表显示在打开它的level 2项目旁边。我现在只有任意的像素值在里面。

您还必须将level 2li的位置设置为除static之外的其他值，以便level 3 ul的position:absolute将基于它。( position :absolute使位置相对于具有非静态位置的元素的第一个父元素。)

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