Question

我在下拉菜单中遇到了一些问题。我想，在悬停时，子菜单出现。当用户鼠标退出父级并移动到列表时，我需要保留列表，允许用户浏览。

如何实现这一目标？

我正在使用以下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;
}

无法打开你的小提琴（公司网络），但这应该这样做：）

Answer 2

根据您的结构，您可以使用：

#mainMenuBar ul {
    display:none;
}
#mainMenuBar li:hover > ul {
    display:block;
}

你不能与margin子菜单分开，因为它会破坏悬停区域：

#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; REMOVE THIS*/
}

UpdateFiddle

Answer 3

您的问题是href元素和第二个菜单级别之间的差距。

使用以下内容更改#ddOne:hover{...}规则：

#ddOne {
    padding: 0 0 10px 0;
    border: 1px solid red;
}

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

看到它的实际效果：

http://jsfiddle.net/uLbfqrpf/16/

我不建议在:hover上使用基本菜单，因为这会导致网站在触摸屏设备上无法使用。

：当光标停在下拉列表时，悬停以保持活动状态

3 个答案:

UpdateFiddle