当鼠标悬停在菜单上时，子菜单会“拒绝”下一个 div。
如何将 div 固定在下面的位置？
这是我的代码：
* {
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.main-navigation {
width: 60%;
margin: 0 auto;
}
.main-navigation ul {
margin: 0;
padding-left: 0;
list-style: none;
display: flex;
//justify-content:flex-end;
}
.main-navigation li {
flex: 1;
}
.main-navigation a {
display: block;
text-align: center;
padding: .1em;
font: normal small-caps 100 20px/1.8em 'Helvetica Neue';
letter-spacing: .1em;
box-shadow: 4px 2px 2px grey;
text-decoration: none;
background: hsl(0, 100%, 45%);
color: white;
}
.main-navigation a:hover {
background: hsl(0, 0%, 45%);
}
.main-navigation ul ul {
margin: 0;
padding-left: 0;
display: none;
}
.main-navigation ul ul li {
display: flex;
}
.main-navigation ul ul a {
padding: .1em;
display: block;
flex: 1;
}
.main-navigation ul li:hover > ul {
display: block;
}
.block {width:100%;height:60px;background-color:grey;float:right;}
<nav class="main-navigation">
<ul>
<li class="current-menu"><a href="#">landscapes</a></li>
<li><a href="#">menu</a>
<ul>
<li><a href="#">sub menu</a></li>
<li><a href="#">sub menu</a></li>
<li><a href="#">sub menu</a></li>
</ul>
</li>
<li class=""><a href="#">people</a></li>
<li class=""><a href="#">nature</a></li>
<li class=""><a href="#">abstract</a></li>
<li class=""><a href="#">urban</a></li>
</ul>
</nav>
<div class="block"></div>
Apply position: absolute to the ul子菜单的：
.main-navigation ul ul {
margin: 0;
padding-left: 0;
display: none;
position: absolute;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.main-navigation {
width: 60%;
margin: 0 auto;
}
.main-navigation ul {
margin: 0;
padding-left: 0;
list-style: none;
display: flex;
//justify-content:flex-end;
}
.main-navigation li {
flex: 1;
}
.main-navigation a {
display: block;
text-align: center;
padding: .1em;
font: normal small-caps 100 20px/1.8em 'Helvetica Neue';
letter-spacing: .1em;
box-shadow: 4px 2px 2px grey;
text-decoration: none;
background: hsl(0, 100%, 45%);
color: white;
}
.main-navigation a:hover {
background: hsl(0, 0%, 45%);
}
.main-navigation ul ul {
margin: 0;
padding-left: 0;
display: none;
position: absolute;
}
.main-navigation ul ul li {
display: flex;
}
.main-navigation ul ul a {
padding: .1em;
display: block;
flex: 1;
}
.main-navigation ul li:hover > ul {
display: block;
}
.block {width:100%;height:60px;background-color:grey;float:right;}
<nav class="main-navigation">
<ul>
<li class="current-menu"><a href="#">landscapes</a></li>
<li><a href="#">menu</a>
<ul>
<li><a href="#">sub menu</a></li>
<li><a href="#">sub menu</a></li>
<li><a href="#">sub menu</a></li>
</ul>
</li>
<li class=""><a href="#">people</a></li>
<li class=""><a href="#">nature</a></li>
<li class=""><a href="#">abstract</a></li>
<li class=""><a href="#">urban</a></li>
</ul>
</nav>
<div class="block"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
