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

Answer 2

http://jsfiddle.net/gcnmn/

.box ul li ul {
    position:absolute;
    top: 36px;       /* added this line */
    left:131px;
}

如何在其父项旁边创建子菜单？

2 个答案: