我正在尝试将此下拉菜单设置在固定的顶栏中 我看了很多教程和论坛,但没有任何帮助。
我不能:
Here is the code in CSSDesk(请隐藏html / css侧边栏,以便您可以看到主要问题:当光标绕过“Trabalhos”按钮时,许多开/关悬停会闪烁。)
我刚开始,所以如果我的代码很乱,我很抱歉(如果确实是这样,请告诉我!)
#fixtop {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.3);
float: left;
position: relative;
}
#fixtop>ul {
margin: 10px auto;
color: white;
font-size: 1.5em;
display: table;
list-style: none;
}
#fixtop>ul>li {
padding: 0 90px 0 90px;
cursor: default;
transition: 0.2s;
float: left;
}
#fixtop>ul>li>a:hover {
color: yellow;
transition: 0.2s;
}
#topbuttons #bottrab:hover~#submenu {
display: table;
}
/*SUBMENU AREA*/
#submenu {
position: relative;
display: none;
}
#submenu>a {
padding: 10px;
position: relative;
top: 50px;
width: 300px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
font-size: 0.8em;
text-align: center;
color: white;
background: rgba(0, 0, 0, 0.5);
display: block;
z-index: 3;
border-radius: 2px;
}
#submenu>nav>a:hover {
background: rgba(0, 0, 0, 0.7);
transition: 0.2s;
}
<header id="fixtop">
<ul id="topbuttons">
<li><a href="#">Sobre mim</a></li>
<li><a href="#" id="bottrab">Trabalhos</a>
<div id="submenu">
<a href="#">Manipulação de imagem</a>
<a href="#">Diagramação</a>
<a href="#">Programação Web</a>
<a href="#">Design de logo</a>
</div>
</li>
<li><a href="#">Contato</a></li>
</ul>
</header>
答案 0 :(得分:3)
由于子菜单是主菜单元素的子菜单,因此它会在显示时扩展该主菜单元素的大小。因此,菜单项远离鼠标光标。如果是这样,子菜单关闭,主菜单项在鼠标光标下移回。此循环导致悬停和非悬停状态之间的振动。
一种解决方案是将子菜单设置为position:absolute
,以便从文档流中删除它。但这也意味着主菜单项的悬停区域将不包括子菜单的区域,因此当鼠标远离主菜单项时,子菜单将关闭。为解决此问题,我在:hover
元素本身添加了另一个#submenu
定义。
#submenu {
position: absolute;
display: none;
}
#topbuttons #bottrab:hover~#submenu,
#submenu:hover {
display: table;
}
下面的工作示例:
#fixtop {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.3);
float: left;
position: relative;
}
#fixtop ul {
padding: 0;
margin: 10px 0;
color: white;
font-size: 1.2em;
display: table;
list-style: none;
}
#fixtop ul li {
padding: 0 20px;
cursor: default;
transition: 0.2s;
float: left;
}
#fixtop ul li>a:hover {
color: yellow;
transition: 0.2s;
}
#topbuttons #bottrab:hover~#submenu,
#submenu:hover {
display: table;
}
/*SUBMENU AREA*/
#submenu {
position: absolute;
display: none;
}
#submenu a {
padding: 10px;
position: relative;
top: 18px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
font-size: 0.8em;
text-align: center;
color: white;
background: rgba(0, 0, 0, 0.5);
display: block;
z-index: 3;
border-radius: 2px;
}
#submenu a:hover {
background: rgba(0, 0, 0, 0.7);
transition: 0.2s;
}
&#13;
<header id="fixtop">
<ul id="topbuttons">
<li><a href="#">Sobre mim</a></li>
<li><a href="#" id="bottrab">Trabalhos</a>
<div id="submenu">
<a href="#">Manipulação de imagem</a>
<a href="#">Diagramação</a>
<a href="#">Programação Web</a>
<a href="#">Design de logo</a>
</div>
</li>
<li><a href="#">Contato</a></li>
</ul>
</header>
&#13;