我一直在尝试创建一个下拉菜单,该菜单似乎已经取得了一些成功,但是要注意的是……它在元素的右侧而不是直接在其下方显示了下拉菜单。 我怀疑它与位置或填充有关,但我无法弄清楚。 感谢您的关注,我对CSS还是很陌生,这意味着很多!
html
<nav id="navigatie" class="nav">
<ul>
<li><a class="active" href="index.html">Home</a>
<li><a href="html/producten.html">Producten</a></li>
<li><a href="html/personaliseren.html">Personaliseren</a></li>
<li><a>Over ons</a>
<ul>
<li><a href="html/blog.html">Blog</a></li>
<li><a href="html/contact.html">Contact</a></li>
<li><a href="html/faq.html">FAQ</a></li>
</ul>
</li>
</ul>
</nav>
css
html {
background: #936A4A;
}
nav {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #F5F5F5;
}
ul {
display: flex;
flex-wrap: wrap;
padding: 0;
}
ul li {
width: 25%;
}
ul li > ul {
display: none;
flex-direction: column;
}
ul li:hover > ul {
display: flex;
flex-wrap: wrap;
}
ul li > ul li {
width: 100%;
height: 100%;
}
li {
display: flex;
flex: auto;
}
li a {
color: #B85750;
text-decoration: none;
}
.active {
pointer-events: none
}
答案 0 :(得分:0)
是的,您需要相对于父li
完全定位子菜单。
html {
background: #936A4A;
}
nav {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #F5F5F5;
}
ul {
display: flex;
flex-wrap: wrap;
padding: 0;
}
ul li {
width: 25%;
position: relative;
}
ul li>ul {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background: lightblue;
/* display: none; */
flex-direction: column;
}
ul li:hover>ul {
display: flex;
flex-wrap: wrap;
}
ul li>ul li {
width: 100%;
}
li {
display: flex;
flex: auto;
}
li a {
color: #B85750;
text-decoration: none;
}
.active {
pointer-events: none
}
<nav id="navigatie" class="nav">
<ul>
<li><a class="active" href="index.html">Home</a>
<li><a href="html/producten.html">Producten</a></li>
<li><a href="html/personaliseren.html">Personaliseren</a></li>
<li><a>Over ons</a>
<ul>
<li><a href="html/blog.html">Blog</a></li>
<li><a href="html/contact.html">Contact</a></li>
<li><a href="html/faq.html">FAQ</a></li>
</ul>
</li>
</ul>
</nav>
答案 1 :(得分:0)
请查看以下解决方案。
html {
background: #fff;
}
.parent-container{
position: relative;
width:100%;
height: 100%;
}
nav {
background: #F5F5F5;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
background: #936A4A;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
background: lightblue;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link href="app.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="parent-container">
<nav role="navigation" class="nav" id="navigatie">
<ul>
<li><a class="active" href="index.html">Home</a>
<li><a href="html/producten.html">Producten</a></li>
<li><a href="html/personaliseren.html">Personaliseren</a></li>
<li><a href="#">Over ons</a>
<ul class="dropdown">
<li><a href="html/blog.html">Blog</a></li>
<li><a href="html/contact.html">Contact</a></li>
<li><a href="html/faq.html">FAQ</a>/<li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>