Question

我一直在搜索stackoverflow，但没有发现任何类似的内容。

我有一个带有1个子菜单的垂直（普通）菜单，我希望它位于主菜单的右侧，而不会在其后面的菜单项上留下间隙。

HTML

<ul class="sidemenu">
<li><a href="">Home</a></li>        
<li><a href="">History</a>
    <ul>
        <li><a href="">1st page</a></li> 
        <li><a href="">2nd page</a></li> 
        <li><a href="">3rd page</a></li> 
        <li><a href="">4th page</a></li> 
    </ul>
</li>
<li><a href="">A-Z index</a></li> 
<li><a href="">Contact</a></li> 
</ul>

CSS

ul.sidemenu {
list-style-type:none;
padding:10px 0px;
margin:0;
text-align:center;
}

ul.sidemenu li {
margin:5px 0px;
}

ul.sidemenu li a {
display:block;
line-height:20px;
padding:10px 0px;
width:200px;
background-color: rgba(28,28,28, 0.16);
font-family:arial;
font-size:1.4em;
text-transform:uppercase;
color:#1c1c1c;
text-decoration:none;
}

/*dropdown menu*/

ul.sidemenu li ul {
display:none;
list-style-type:none;
}

ul.sidemenu li:hover > ul {
display:block;
width:120px;
position:relative; left:20%; top:-45px;
}

正如您在演示中所看到的，下拉菜单确实位置正确，它仍留下巨大的空白区域，因为它也是如此。

有什么建议吗？我已经尝试过绝对定位，但是当我调整浏览器窗口大小时，它会离开它想要的位置。

谢谢，

Answer 1

您可以创建两个div：首先，您可以将主菜单放在第二个子菜单中。因此，请尝试在一个<ul>中插入子菜单div元素，然后将<ul>插入另一个div。现在，如果您将鼠标悬停在主菜单li元素上，则可以在右侧的div中显示您的子菜单。

简单示例：

<div>
   <ul class='mainmenu'>....</ul>
</div>
<div>
   <ul class='submenu'>....</ul>
</div>

Answer 2

将position:absolute添加到第一个 UL 和第二个 UL 。然后使用左，上，下值

定位元素

UPDATED JSFIDDLE DEMO

更新CSS

ul.sidemenu {
    list-style-type:none;
    padding:10px 0px;
    margin:0;
    text-align:center;
    position:absolute;
}

ul.sidemenu li {
    margin:5px 0px;
}

ul.sidemenu li a {
    display:block;
    line-height:20px;
    padding:10px 0px;
    width:200px;
    background-color: rgba(28,28,28, 0.16);
    font-family:arial;
    font-size:1.4em;
    text-transform:uppercase;
    color:#1c1c1c;
    text-decoration:none;
}

/*dropdown menu*/

ul.sidemenu li ul {
    display:none;
    list-style-type:none;
}

ul.sidemenu li:hover > ul {
    display:block;
    width:120px;
    position:absolute;
    left:82%; 
    top:27%;
}

1。将<{1}}添加到 ul.sidemenu 。

2。在position:absolute;中将position:relative;更改为position:absolute;，同时更改了ul.sidemenu li:hover > ul和left的值。< / p>

下拉菜单相对定位会在主菜单项之间留下空隙

2 个答案: