Html 为什么我的CSS不能正常工作？

标题说明一切；我的css：

a.menu:hover {
opacity: 1;
text-shadow: 0 0 10px white;
}
a.menu:hover ~ .dropdown {
display: block;
}

.dropdown {
display: none;
width: 50px;
height: 50px;
position: absolute;
top: 120px;
left: 120px;
background: red;
}

HTML:

为什么将鼠标悬停在菜单链接上时，.dropdown现在可见？

要更改吗

> 

到

---

因为箭头是后代选择器，而加号是同级选择器。

实际上，您的

h2

不是

h1

标记的子级。您必须使用

同级运算符（+）

来实现这一点

  h1:hover + h2{
     display: block;
  }

上述解决方案将指向下一个直接同级元素。如果要针对所有元素，请使用

~

运算符

  h1:hover ~ h2{
     display: block;
  }

编辑：

根据您的编辑，看起来您必须更改如下顺序

 a.menu:hover {
  opacity: 1;
  text-shadow: 0 0 10px white;
 }
 .dropdown {
   display: none;
   width: 50px;
   height: 50px;
   position: absolute;
   top: 120px;
   left: 120px;
   background: red;
  }
 a.menu:hover ~ .dropdown {
   display: block;
 }

HTML

 <div class="left_topbar">
      <a href="http://teamcowgames.net" class="logo"><img src="css/img/logo.png"></a>
      <a href="http://teamcowgames.net/games" class="menu">Games &#9662;</a>
      <div class="dropdown"></div>
 </div>

EDIT：当我在我的网站上试用时，它似乎与我现有的代码不兼容。我的代码在我的主代码中，用HTML结构修改了我的答案。检查一下，我没有做这件事事实上，我认为让2:停留在同一个类上是有问题的。我不确定你说的不工作是什么意思。我的代码工作得很好。检查这把小提琴我不知道为什么它不工作，但我只是做了一个链接下拉，它工作了，我想有一个链接悬停的东西不能影响正常的div

 a.menu:hover {
  opacity: 1;
  text-shadow: 0 0 10px white;
 }
 .dropdown {
   display: none;
   width: 50px;
   height: 50px;
   position: absolute;
   top: 120px;
   left: 120px;
   background: red;
  }
 a.menu:hover ~ .dropdown {
   display: block;
 }

 <div class="left_topbar">
      <a href="http://teamcowgames.net" class="logo"><img src="css/img/logo.png"></a>
      <a href="http://teamcowgames.net/games" class="menu">Games &#9662;</a>
      <div class="dropdown"></div>
 </div>