html - :hover to stay active when cursor over dropdown

Question

我在使用下拉菜单时遇到了一些问题。我希望在悬停时显示子菜单。当用户鼠标离开父级并移动到列表时，我需要保留列表，允许用户浏览。

这是如何实现的？

当 parent 悬停时，我正在使用以下 css 下拉菜单:

#ddOne:hover ~ ul {
    background-color: red;
    display: block !important;
}

我做了一个fiddle我的问题。谢谢!

完整代码:

  #mainMenuBar li ul li {
    width: 100%;
  }
  #mainMenuBar {
    list-style: outside none none;
    margin-top: 30px;
    display: none;
  }
  #mainMenuBar li {
    width: 90%;
    margin: 5px auto;
    border: 0px solid #F00;
    min-height: 40px;
    text-align: center;
    vertical-align: middle;
  }
  #mainMenuBar ul li {
    float: left;
    min-height: 1px;
    vertical-align: middle;
    position: relative;
  }
  #mainMenuBar li ul,
  #mainMenuBar li ul li ul {
    display: none;
  }
  #mainMenuBar li ul li ul {
    position: relative;
    display: none;
    width: 100%;
    height: auto;
  }
  @media screen and (min-width: 641px) {
    #mainMenuBar {
      display: block;
      color: white;
    }
    #ddOne:hover ~ ul,
    #mainMenuBar li ul:hover ~ ul {
      background-color: red;
      display: block !important;
    }
    #mainMenuBar li {
      width: auto;
      float: left;
      padding: 0px 1.4%;
      min-height: 0;
    }
    #mainMenuBar li a {
      /*	margin-bottom: -25px;
    height: 50px;
    */
    }
    #mainMenuBar li ul {
      position: absolute;
      width: 150px;
      background: none repeat scroll 0% 0% #333;
      height: 100px;
      padding-top: 10px;
      border-top: 1px solid red;
      margin-top: 6px;
    }
    #mainMenuBar {
      display: block;
    }
    #mainMenuBar li ul li {
      width: 100%;
      list-style: none;
    }
    #mainMenuBar li ul li ul {
      margin-left: 148px;
      position: absolute;
      top: 0;
    }
  }

<ul id="mainMenuBar">
  <li><a href="#">Home</a>
  </li>
  <li>
    <a href="#" class="dropdown" id="ddOne">Cigarette Types +</a>
    <ul>
      <li>
        <a href="#" class="dropdown" id="subTwo">A - D +</a>
        <ul>
          <li>Argentinean Sylvestris</li>
          <li>Aztec Rustica</li>
          <li>Banana Leaf</li>
          <li>Big Gem</li>
          <li>Blue Tree Glaucia</li>
          <li>Burley Oridinal</li>
          <li>Burley Variation</li>
          <li>Catterton</li>
          <li>Cherry Red</li>
          <li>Connecticut Broard Leaf</li>
          <li>Cuban Havana 142</li>
          <li>Del Gold</li>
        </ul>
        <a href="#" class="dropdown" id="subTwo">E - O +</a>
        <a href="#" class="dropdown" id="subTwo">P - T +</a>
        <a href="#" class="dropdown" id="subTwo">U - Z +</a>
        <ul>
          <li>Third Level</li>
          <li>Third Level</li>
          <li>Sub Three</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Cigar Types</a>
  </li>
  <li class="hasSub"><a href="#" class="dropdown">Pipe Types+</a>
    <ul>
      <li>sub 2</li>
      <li>
        <a href="#" class="dropdown" id="subTwo">sub1.1+</a>
        <ul>
          <li>testt</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Pelleted Seeds</a>
  </li>
  <li><a href="#">Strong  Types</a>
  </li>
</ul>

Answer 1

#ddOne:hover ~ ul, #ddOne ~ ul:hover {
    background-color: red;
    display: block !important;
}

无法打开您的 fiddle (公司网络)，但这应该可以:)