所以我想要一个下拉菜单,但是要弹出菜单而不是在左侧弹出而不覆盖其他子主题,因此这些其他子主题将浮动到bot中。 我在油漆上制作了此蒙太奇,以便您可以看到我想要的东西:
nav ul {
box-shadow: 0px 0px 5px whitesmoke;
list-style-type: none;
background-color: #FB030F;
margin: 0;
padding: 0;
width:calc(100% - 3px);
}
nav > ul > li ul {
display: none;
}
nav ul > li {
display: block;
position: relative;
}
nav #m {
display: block;
padding: 5px 5px;
text-decoration: none;
white-space: nowrap;
color: white;
}
nav #m:hover {
background-color: #ff7373;
}
nav > ul li:hover > ul {
display: block;
position: absolute;
top: 0;
top: 100%;
}
ul li:hover > #n {
display: block;
position: absolute;
top: 0;
left: 100%;
}
nav a {
text-align: center;
}
<nav>
<ul>
<li><a href="builds.html" id="m">Builds</a>
<ul id="n">
<li><a href="build1.html" id="m">Build 1</a></li>
<li><a href="build2.html" id="m">Build 2</a></li >
<li><a href="build3.html" id="m">Build 3</a></li>
<li><a href="build4.html" id="m">Build 4</a></li>
<li><a href="build5.html" id="m">Build 5</a></li>
<li><a href="build6.html" id="m">Build 6</a></li>
<li><a href="build7.html" id="m">Build 7</a></li>
<li><a href="build8.html" id="m">Build 8</a></li>
</ul>
</li>
<li><a href="configurador.html" id="m">Configurador</a></li>
<li><a href="info.html" id="m">Componentes</a></li>
<li><a href="help.html" id="m">Guia</a></li>
</ul></li>
</nav>
让我在这里写一些东西,以便我可以发布此问题,因为堆栈溢出告诉我由于代码过多而无法发布,因此我必须添加更多详细信息。但是我想我的疑问很简单,如果我写错了请告诉我,我不需要添加更多信息。
答案 0 :(得分:0)
如果我理解的正确,请尝试以下操作:
nav ul {
box-shadow: 0px 0px 5px whitesmoke;
list-style-type: none;
background-color: #FB030F;
margin: 0;
padding: 0;
width:calc(100% - 3px);
}
nav > ul > li ul {
display: none;
}
nav ul > li {
display: block;
position: relative;
}
nav #m {
display: block;
padding: 5px 5px;
text-decoration: none;
white-space: nowrap;
color: white;
}
nav #m:hover {
background-color: #ff7373;
}
nav > ul > li:hover ul {
display: block;
}
nav a {
text-align: center;
}
我刚刚删除了一些放置绝对块的类,这就是为什么菜单不在您想要的位置出现的原因。 希望会有所帮助。