Question

我有一个菜单，我的一些链接有下拉菜单。将鼠标悬停在链接上将显示下拉菜单，但如果我将光标移动到实际的下拉菜单上，则下拉菜单会消失。请帮忙！

以下是实际菜单的CSS和HTML： CSS：

.menu ul {
  color: #3d3d3d;
  text-align: right;
  float: right;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}

.menu ul li {
  font-family: LemonMilk;
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.menu ul li:hover {
  color: #0096ff;
}
.menu ul li ul {
  padding: 0;
  position: absolute;
  background-color: rgba(0,0,0, 0.5);
  margin-top: 5px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.menu ul li ul li { 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
  font-size: 16px;
}
.menu ul li ul li:hover { background-color: rgba(0,0,0, 0.9); }
.menu ul li:hover ul {
  color: #0096ff;
  display: block;
  opacity: 1;
  visibility: visible;
  text-decoration: none;
}

.menu ul li a {
	color: #3d3d3d;
}

.menu ul li a:hover {
	color: #0096ff;
}

.menu ul li ul li a {
	color: #fff;
}

.menu ul li ul li a:hover {
	color: #0096ff;
}

HTML：

	<header>
	<div class="wrapper">
      <a href="../home.php"><div id="clogo"></div></a>
<span class="menu">
				<ul id="dropnav">
                   <li><a href="/forums/index.php"  />Forums</a></li>
                   <li><a href="#">Members</a>
                     		<ul>
							<li><a href="/forums/memberlist.php" id="lihover">Member List</a></li>
							<li><a href="/forums/showteam.php" id="lihover">Staff List</a></li>
						</ul>
					</li>
      						<li><a href="#">Donate</a><br>
				   		<ul>
				   			<li><a href="/departments/minecraft/donate.php" id="lihover">Buycraft</a></li>
							<li><a href="/forums/newpoints.php?action=purchasecredits" id="lihover">Buy Credits</a></li>
							<li><a href="/forums/misc.php?action=payments" id="lihover">CL Plus</a></li>
						</ul>
				   </li>
				</ul>
			</span>	
</div>
</header>

Answer 1

考虑在CSS中使用>选择器，因此它只在标记结构中看一层，不再深入。与您的风格类似的演示 - http://jsfiddle.net/55nw4wmy/

.class ul li {
   affects all levels of <li> inside.
}

.class > ul > li {
   only affects the first level.
}

.class > ul > li > ul > li {
   only affects the second level.
}

这样，您不必不断覆盖规则。对于下拉消失问题，请参阅上面演示链接中的注释。

Answer 2

您显示的代码在我的结尾处理得很好，但是从我的代码中我怀疑.menu ul li ul { margin-top: 5px; }可能是导致此类行为的原因。目前它的工作原理只是因为第一级li的底部填充大于5px。

如果您的主页标题中的li没有任何机会没有底部填充，那么第二级ul的顶部边距将导致li和其中的ul子列表之间的5px空间。当您将鼠标从li移动到子列表时，鼠标将通过不属于列表项的5px空间区域，并且：hover将失去其效果。

我建议将其更改为.menu ul li ul { padding-top: 5px; }

移动鼠标后，CSS / HTML Drop菜单会消失

2 个答案: