html - CSS :Hover Selecting Too Many

Question

所有，我搜索了一圈，感觉很简单。将鼠标悬停在我的任何导航项上时，它会显示我的导航栏的所有级别。我尝试了几种不同的选择方式，但这是我的 CSS 代码。

    div#topnav {
      margin: -1px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      width: 100%;
      height: 21px;
      background-color: #666;
      border-bottom: 1px solid black;
    }
    div#topnav ul {
      margin: 0;
      padding: 0px;
      background: #666;
      text-align: left;
      width: auto;
      font-size: 10px;
      font-weight: bold;
    }
    div#topnav li {
      position: relative;
      list-style: none;
      margin: 0px;
      padding: 3px 8px 2px 8px;
      float: right;
      border-left: 1px solid silver;
    }
    div#topnav li:hover {
      background-color: #0038A8;
    }
    div#topnav li li.submenu:hover {
      background-color: #0038A8;
    }
    div#topnav li a {
      display: block;
      padding: 0;
      text-decoration: none;
      width: auto;
      color: white;
    }
    div#topnav li a:hover {
      text-decoration: none;
    }
    div#topnav>ul a {
      width: auto;
    }
    ul.level2 {
      position: absolute;
      width: 175px;
      display: none;
      border-top: 1px solid black;
    }
    div#topnav ul ul li {
      float: left;
      width: 158px;
      border-bottom: 1px solid gray;
    }
    div#topnav ul.level2 {
      top: 19px;
      left: -1px;
      margin-top: 2px;
      font-weight: normal;
    }
    div#topnav ul.level3 {
      top: -1px;
      left: 174px;
      border: 1px solid #000;
      font-weight: normal;
    }
    ul.level1:hover > li ul.level2 {
      display: block;
    }

<div id="topnav" class="menu">
  <ul class="level1">
    <li>Item 1</li>
  </ul>
  <ul class="level1">
    <li>Help
      <ul class="level2">
        <li>Email us</li>
        <li>Call Us</li>
        <li>Online Support</li>
        <li>Forums</li>
      </ul>
    </li>
    <li>Shopping
      <ul class="level2">
        <li>Shoes</li>
        <li>Shirts</li>
        <li>Pants</li>
      </ul>
    </li>
    <li>Home</li>
  </ul>
</div>

我也将 CSS 作为直接后代，但仍然有同样的问题(下面是我使用的)。

ul.level1:hover > li ul.level2

Answer 1

这是一个工作 fiddle :http://jsfiddle.net/7w68q1f4/

ul.level1 li:hover > ul.level2 {
display:block;}