我想制作一个带有子菜单的垂直菜单,子菜单必须紧挨着父 div。
希望你们知道如何做到这一点,我在谷歌上查看了一下,但只发现了 2 个 div 彼此相邻的结果。但我需要子 div 必须得到它的下一个。
我现在的代码:
HTML
<div id="menuCont">
<div class="menuItem">
Applicatie Ontwikkeling
<div class="subMenuCont">
<div class="subMenuItem">HTML</div>
<div class="subMenuItem">CSS</div>
<div class="subMenuItem">jQuery</div>
</div>
</div>
<div class="menuItem">
Netwerk Beheer
</div>
<div class="menuItem">
Server Beheer
</div>
</div>
CSS
#menuCont {
width: 17.5%;
text-align: center;
}
.menuItem {
width: 100%;
padding: 1em;
background-color: #ffffff;
color: #000000;
font-family: Lato;
font-size: 125%;
border: 1px solid #7266ff;
border-bottom: 0;
cursor: pointer;
}
.menuItem:first-child {
border-top-left-radius: 1.5em;
}
.menuItem:last-child {
border-bottom: 1px solid #7266ff;
border-bottom-right-radius: 1.5em;
}
.menuItem:hover {
background-color: #7266ff;
color: white;
}
.subMenuCont {
/*display: none;*/
position: relative;
/*left: 100%;*/
/*width: 90%;*/
}
.subMenuItem {
border: 1px solid #7266ff;
border-bottom: 0;
}
.subMenuItem:last-child {
border-bottom: 1px solid #7266ff;
}
您需要更多信息,请说。现在我不知道该提供更多信息。
最佳答案
在您的 CSS 代码中,我将位置元素更改为绝对位置,这样您就可以将元素准确放置在您想要的位置:
.subMenuCont {
position: absolute;
top:0;
left: 17.5%;
width: 17.5%;
}
关于html - 显示旁边那个div里面的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36400629/