我做了全宽下拉子菜单。问题是当我试图将鼠标从主列表移动到子菜单时,子菜单消失了。此外,不应用子菜单上的过渡。我写的代码在下面。请检查并纠正它。
body {
margin: 0;
padding: 0;
}
ul,
li,
a {
list-style: none;
text-decoration: none;
}
.wrap {
position: relative;
width: 100%;
height: 100px;
}
.list {
margin: 0;
padding: 0;
width: 100%;
left: 0;
top: 100px;
height: 100px;
text-align: center;
}
.list li {
display: inline-block;
margin: 20px;
}
.list>li:hover ul {
display: list-item;
opacity: 1;
}
.list>li:hover>a {
color: red;
}
.sub_list {
margin: 0;
padding: 0;
position: absolute;
display: none;
width: 100%;
height: 100px;
left: 0;
top: 50px;
text-align: center;
opacity: 0;
transition: all 0.5s;
}
.sub_list li {
display: inline-block;
margin: 20px;
}
.sub_list li a:hover {
color: red;
}
<div class="wrap">
<ul class="list">
<li><a href="#">list-1</a>
<ul class="sub_list">
<li><a href="#">sublist-a</a></li>
<li><a href="#">sublist-b</a></li>
<li><a href="#">sublist-c</a></li>
</ul>
</li>
<li><a href="#">list-2</a></li>
<li><a href="#">list-3</a></li>
<li><a href="#">list-4</a></li>
<li><a href="#">list-5</a></li>
</ul>
</div>
我想使子菜单保持可见时,鼠标在整个区域的子菜单div(100%的屏幕宽度)。
请帮忙谢谢
4条答案
按热度按时间ttp71kqs1#
除了在其他答案中提到的关于margin/padding/positioning的问题之外,转换将不起作用,因为您不能从
display: none;
转换到另一个状态,反之亦然。相反,只依赖于opacity
并添加pointer-events
属性,以便子菜单本身在隐藏时不会触发悬停或覆盖任何其他内容。下面是完整的工作代码:
k4emjkb12#
我帮你解决了这个问题:https://codepen.io/anon/pen/rboPLE这是我改变的:
当试图到达子菜单时,您离开了
.list li
项,因为它有一个边距。使用Padding,空间属于元素,当您将鼠标移动到子菜单时,它仍然悬停。我在上面的链接中为示例着色,以便您可以看到元素的边界。
d4so4syb3#
你的代码是完美的,但有一些小问题。
使用CSS代码:
使用此代码其工作完美的过渡效果和下拉子菜单的问题得到解决.
nzk0hqpo4#
简单地使用
opacity: 0; visibility: hidden;
,当鼠标悬停在li标签上时,将其更改为opacity: 1; visibility: visible; pointer-events: all;