html - CSS 继承 : ul style not applied to nested div

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>

这部分已经解决了:

Basically, my problem is that I want my "dropdown" div to have no style of its own, but to inherit the style of the navbar.

The weird thing is that the nested navbar is properly styled, but the dropdown div follows the style of general a and hover:a elements.

If you look at the beginning of my HTML, you'll see the culprit: <div class="dropdown">, which appears completely differently from the rest. I don't understand why the class in which it is nested (the nav class) is not considered the parent, especially since the following list is properly styled.

I attached a screenshot of what it looks like: "Jeux de vilains" looks weird, when it should look like "Règles du jeu".

这个也解决了

Well thank you all for you swift and kind help, I took out the unwanted div and put the dropdown class in the corresponding li.

However, while the list does appear on hover, it disappears as soon as the mouse is not hovered. I'd like to make it so the secondary menu appears as long as either the parent li or the secondary menu itself are hovered. How could I do that ?

Here's the website : http://medialab.github.io/carto2016-jeuxvideos/index.html

Thanks in advance for everyone's help.

问题已解决。

Answer 1

您的第一直觉是使用 JavaScript，但对于这个，有一种巧妙的方法可以使用 CSS 中本质上的运算符来实现这一点...

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

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

因为您选择的是父元素，所以它既适用于下拉菜单，也适用于您将鼠标悬停在其上以显示它的内容，因此只要它在这些领域内就会显示。做得更多，他们将在各自的下拉菜单中发挥同样的作用。

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