html - 移动鼠标后 CSS/HTML 下拉菜单消失

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.
}

这样，您就不必不断地覆盖规则。关于下拉消失的问题，请看上面的演示链接中的评论。