Question

我正在创建一个用于练习的电子商务网站，但遇到了一个问题。我在导航栏中为第一个项目创建了一个下拉菜单，但是当我将鼠标悬停在该菜单上时，整个菜单会一直闪烁。

我已经尝试了一切，直到我对css和html都了解了，但还是不好。请注意，我只是一个初学者。

.cabecalho {
	background-color: #22333B;
	display: flex;
	border-bottom: 6px solid black;
	justify-content: center;
	padding: 20px;
}

.cabecalho-nav { 
	width: 400px;
	display: flex;
	justify-content: space-between;
	position: relative;
	right:20px;
}

.dropdown-categorias {
	display: none;
	position: absolute;
	left: 3px;
	top: 30px;
	background-color: #22333B;
	min-width: 120px;
  z-index: 1; 
}

.dropdown-categorias a {
	border: 2px solid black;
	color: white;
	display: block;
	text-decoration: none;
	padding: 8px;
	font-size: .8rem;
	font-family: 'Lato', sans-serif;
}

.dropdown-categorias a:nth-child(1){
	border-bottom: 1px solid white;
}

.dropdown-categorias a:nth-child(2){
	border-bottom: 1px solid white;
}

.dropdown-categorias a:hover{
	box-shadow: inset 2px 2px 10px rgba(0,0,0,0.7);
}

#texto-categoria:hover+.dropdown-categorias{ 
  display:block
}

<nav class="cabecalho-nav">
  <a class="texto-nav" id="texto-categoria">Categorias</a>
  <div class="dropdown-categorias">
    <a href="eletronicos.html">Eletronicos</a>
    <a href="acessorios.html">Acessórios</a>
    <a href="arte.html">Musica</a>
  </div>
  <a href="test.html" class="texto-nav">Home</a>
  <a href="sobre.html" class="texto-nav">Sobre</a>
  <a href="contato.html" class="texto-nav">Contato</a>
</nav>

Answer 1

之所以会出现闪烁，是因为一旦弹出菜单，您就不再将鼠标悬停在类别链接上了。我相信您可以通过将以下类调整为我提供的内容来完成您想做的事情：

.dropdown-categorias a {
  border: 2px solid black;
  color: white;
  display: block;
  text-decoration: none;
  padding: 8px;
  font-size: .8rem;
  font-family: 'Lato', sans-serif;
  background-color: #22333B;
}

#texto-categoria:hover+.dropdown-categorias, .dropdown-categorias:hover{ 
  display:block;
}

.dropdown-categorias {
  background: none;
  top: 0px;
  padding-top: 30px;
}

示例：https://js-mj45kn.stackblitz.io

将鼠标悬停在下拉菜单上时，其闪烁

1 个答案: