So I want a dropdown menu but instead of it pop up in left, it will pop up down without overlay other subtopics and so these other subtopics will float to bot. I made this montage on paint so you can see what I want:
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>
Let me just write something here so I can post this question, because stack overflow is telling me that I cannot post this because I have too much code and so I have to add more details. But I guess my doubt is simple and I do not need to add more info, if I am wrong tell me please.
If I understand you right, then try this:
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;
}
I just deleted some classes which positioned blocks absolute, that's why menu appeared not where you wanted. Hope it'll help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.