Question

这是我的HTML

<header class='lap-12 row'>
    <div class="lap-2 center">
        <a href="#"><img src="logo-desktop.png" alt="logo-desktop"></a>
    </div>
    <div class="lap-8 center space-around">
        <a id='velos' href="#"><b>VELOS</b></a>
        <a href="#"><b>PRODUITS</b></a>
        <a href="#">LA MARQUE</a>
        <a href="#">CONSEILS</a>
        <a href="#">GARANTIE À VIE</a>
        <i class="fa fa-search" aria-hidden="true"></i>
    </div>
    <div class="lap-2">
    </div>
</header>
<div class="lap-12 dropdown-content">
    <div class="lap-12 dropdown-top">
        1
    </div>
    <div class="lap-12 dropdown-bottom">
        2
    </div>
</div>

这是我的CSS：

.dropdown-content {
    display: none;
    position: absolute;
    height: 150px;
    width: 100%;
}

#velos:hover .dropdown-content {
  display: block;
}

下拉内容根本没有出现在我的＆＃39; velos＆＃39; ID.. lap- *类只给我的元素增加了宽度。

Answer 1

CSS：

#velos:hover .dropdown-content {}

意思是：

当标有ID为velos的元素时，请更改具有类dropdown-content的子项的样式

在您的示例中，类dropdown-content的元素没有#velos作为父级，因此不会受到影响。

尝试这样的事情：

<header class='lap-12 row'>
    <div class="lap-2 center">
        <a href="#"><img src="logo-desktop.png" alt="logo-desktop"></a>
    </div>
    <div class="lap-8 center space-around">
        <a id='velos' href="#"><b>VELOS</b>
          <div class="lap-12 dropdown-content">
              <div class="lap-12 dropdown-top">
                  1
              </div>
              <div class="lap-12 dropdown-bottom">
                  2
              </div>
          </div>        
        </a>
        <a href="#"><b>PRODUITS</b></a>
        <a href="#">LA MARQUE</a>
        <a href="#">CONSEILS</a>
        <a href="#">GARANTIE À VIE</a>
        <i class="fa fa-search" aria-hidden="true"></i>
    </div>
    <div class="lap-2">
    </div>
</header>

JSFiddle

我还在下拉列表中添加了其他样式，因此会有一个带链接的常见像素，它可用作菜单：

#velos:hover .dropdown-content {
  display: block;
  margin-top:-1px;
  padding-top:1px;
}

...否则它会在徘徊之后消失，因为链接会自动丢失。至少在Chrome / Opera中。

Answer 2

你的css要求设置display：block;在.dropdown-content上悬停作为velos的孩子。

显然这是错误的，无论如何这不是真正的方法，试试这个：

    $("ul li").slideUp();
    $("label").mouseover(function () {
        $("ul li").slideToggle();
    });

    ul {
        display: table;
        list-style: none;
        padding: 0;
    }

    ul li {
        display: block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>One</label>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>

下拉内容未在悬停时显示

2 个答案: