Question

尝试使用嵌套列表在导航栏中构建下拉菜单时遇到了问题。

以下是代码片段：

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
}

.dropdown:hover + .dropdown-content {
    display: block;
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

     <nav class="navbar navbar-default" role="navigation" data-600='opacity:0' data-1000='opacity:1'>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul id=navbar class="nav navbar-nav">
          <li class="dropdown"><a href=index.html>Jeux de vilains ▼</a></li>
            <div class="dropdown-content">
            <ul class="nav navbar-nav navbar-right">
              <li class=secondary><a href=/carto2016-jeuxvideos/article-1.html>Tomb Raider</a></li>
              <li class=secondary><a href=/carto2016-jeuxvideos/article-2.html>GTA</a></li>
              <li class=secondary><a href=/carto2016-jeuxvideos/article-3.html>SimCity</a></li>
              <li class=secondary><a href=/carto2016-jeuxvideos/article-4.html>Call of Duty</a></li>
              <li class=secondary><a href=/carto2016-jeuxvideos/article-5.html>Resident Evil 5</a></li>
              <li class=secondary><a href=/carto2016-jeuxvideos/article-6.html>Civilization</a></li>
            </ul>
          </div>
          </ul>
          </div>

这部分已经解决：

基本上，我的问题是我希望我的“下拉”div没有   它自己的风格，但继承了导航栏的风格。

奇怪的是嵌套导航栏的样式是正确的，但是   dropdown div遵循一般a和hover的风格：一个元素。

如果你看一下HTML的开头，你会看到罪魁祸首：<div class="dropdown">，它看起来完全不同于   休息。我不明白为什么它嵌套的类（导航   class）不被视为父母，特别是以下   列表格式正确。

我附上screenshot的样子：“Jeux de vilains”   看起来很奇怪，它应该看起来像“Règlesdujeu”。

这也已经解决了

  好的，谢谢大家的快速和善意的帮助，我拿出了   不需要的div并将下拉类放在相应的li中。

但是，虽然列表确实出现在悬停状态，但它会立即消失   鼠标没有徘徊。我想把它做成二级菜单   只要父li或辅助菜单本身出现就会出现   徘徊。我怎么能这样做？

这是网站：   http://medialab.github.io/carto2016-jeuxvideos/index.html

提前感谢大家的帮助。

问题已解决。

Answer 1

你的第一直觉就是使用JavaScript，但是为了实现这一点，有一种灵活的方法可以用CSS中的运算符...

在父元素上使用:hover伪类，并查找下拉列表的实例。

.nav:hover .dropdown-content {
    display: block;
}

因为您选择了父元素，所以它既适用于下拉列表，也适用于您将鼠标悬停在其上以显示它，因此无论何时它都在这些领域内显示。赚更多，他们的工作方式与他们各自的下拉菜单相同。

https://jsfiddle.net/ksxk33w4/1/

CSS继承：ul样式不适用于嵌套div

1 个答案: