html - 如何在其父元素旁边制作子菜单？

Question

我有一个菜单，在这个菜单中，一些元素包含子元素。 为元素创建子集时，子集元素不会在父元素旁边。

例如:
在下面的代码中，元素 2 有一个子集，但是元素 3 旁边的这个子集并不像元素 2 旁边的预期那样。

我要
当我为任何父元素创建子集时，子集必须在属于它的元素旁边。

HTML

<div class="box">
    <ul>
        <li> <a href="#"> Item 1 </a> 
        </li>
        <li> <a href="#"> Item 2 </a> 
            <ul>
                <li> <a href="#"> Subset Item 2</a> </li>
                <li> <a href="#"> Subset Item 2</a> </li>
            </ul>
        </li>
        <li> <a href="#"> Item 3 </a> 
        </li>
        <li> <a href="#"> Item 4 </a> 
        </li>
        <li> <a href="#"> Item 5 </a> 
        </li>
    </ul>
</div>

CSS

.box {
    width:130px;
}
.box ul {
    padding:0;
    margin:0;
    list-style-type:none;
    position:relative;
}
.box ul li {
    margin-bottom:1px;
}
.box ul li a {
    display:block;
    padding:5px;
    background-color:#ff0099;
    color:#fff;
    font:bold 20px arial;
    text-decoration:none;
}
.box ul li a:hover {
    background-color:#b2086e;
    color:#fff;
}
.box ul li ul {
    position:absolute;
    left:131px;
}
.box ul li ul li a {
    width: 135px;
}

您还可以看到 online JSFiddle .

Answer 1

只需制作 <li>相对定位，而不是<ul> .然后你可以设置子菜单为top: 0还有left: 100%而不是设置像素值。

.box ul li {
  margin-bottom:1px;
  position: relative;
}

.box ul li ul {
  position:absolute;
  left:100%;
  top: 0;
  margin-left: 1px; /* Styling */
}

Demo