css -垂直嵌套菜单-不能正确的嵌套样式，它会形成一个更大的矩形。

Question

我试着做一个垂直菜单，但是每次我在悬停时显示子菜单时，它都会扩展前一个元素，生成一个“更大的框”。我不知道该怎么做。如果有css解决方案，不要使用jquery插件。我也有bootstrap3，但是不支持嵌套下拉，下拉列表中的下拉列表.嵌套的那些没有打开..。

JSFiddle链接：http://jsfiddle.net/WqW5j/

index.html

 <div class="nav">
 <ul class="main">
 <li><a href="">1</a></li>
 <li><a href="">2</a></li>
 <li>
   <a href="">3</a>
   <ul class="sub">
    <li><a href="">3-1</a></li>
    <li><a href="">3-2</a>
        <ul class="sub">
            <li><a href="">3-2-1</a></li>
            <li><a href="">3-2-2</a>
                <ul class="sub">
                    <li><a href="">3-2-2-1</a></li>
                    <li><a href="">3-2-2-2</a></li>
                </ul>
            </li>
        </ul>
    </li>
  </ul>
 </li>
</ul>

css

        .main{
            list-style: none;
            padding:0px;
            margin: 0px;
        }
        .main li{
            background-color:#f1f1f1;
            padding: 10px;
            margin: 5px;
            float:left;
            clear:both;
        }
        .main li:hover{
            background-color:#d8d8d8;
        }

          .main .sub{
            display: none;
          }
          .sub > li > .sub{
            display: none;
          }

          .main > li:hover > .sub:nth-of-type(1){
            display: block;
            position: relative;
            left: 20px;
            top:-30px;
            list-style: none;
            float:left;
            width: 100px;
            clear: both;
          }

          .sub > li:hover > .sub{
            display: block;
            position: relative;
            left: 20px;
            top:-30px; 
            list-style: none;
            float:left;
            width: 100px;
          }

Answer 1

要使嵌套菜单工作，请使所有li项position:relative并使ul在悬停时显示为position:absolute。

检查这个小提琴

HTML：

<div class="nav">
 <ul class="main">
     <li><a href="">1</a>
         <ul class="sub">
             <li><a href="">1-1</a>
                 <ul class="sub">
                     <li><a href="">1-1-1</a></li>
                     <li><a href="">1-2-1</a></li>
                 </ul>
             </li>
             <li><a href="">1-2</a>
                 <ul class="sub">
                     <li><a href="">1-2-1</a></li>
                     <li><a href="">1-2-2</a></li>
                 </ul>
             </li>
         </ul>
     </li>
     <li><a href="">2</a></li>
 </ul>
</div>

CSS

.main{
    list-style: none;
    padding:0px;
    margin: 0px;
  }
  .main li{
    background-color:#f1f1f1;
    padding: 10px;
    margin: 5px;
    float:left;
    clear:both;
    position:relative;
  }
  .main li:hover{
   background-color:#d8d8d8;
  }

  .main .sub{
    display: none;
    list-style:none;
    padding-left:0;
    width:auto;
  }

.main .sub li{
    float:none;
}

.main > li:hover > .sub{
    display:block;
    position:absolute;
    top:0;
    left:100%;
}

.sub li:hover .sub{
    display:block;
    position:absolute;
    top:0;
    left:100%;
}