我的下拉菜单悬停不起作用

Question

如果希望将鼠标悬停在下拉菜单li上，我希望出现下拉菜单内容ul。我正在.dropdown类上使用：hover psuedo类。

有什么我想念的吗？

谢谢！

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content ul  {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content li {
        background-color: gray;
    }  

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

       <div class="menu">
            <ul class="menu-list">
                <li class="menu-list-item dropdown">
                    <a href="https://blah.com/aboutus/">About US</a>
                    <ul class="dropdown-content">
                        <li class="menu-list-item">
                            <a href="https://blah.com/faq/">FAQ</a>
                        </li>
                        <li class="menu-list-item">
                            <a href="https://blah.com/page-2">Produkter</a>
                        </li>
                    </ul>
                </li>                  
                <li class="menu-list-item">
                    <a href="#">Link</a>
                </li>
                <li class="menu-list-item">
                    <a href="https://blah.com/contact-us">Kontakt Oss</a>
                </li>  
            </ul>
        </div>

Answer 1

.dropdown-content已经是ul，其中没有ul。您还应该忘记定义display:none

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content  {
  padding: 12px 16px;
  text-decoration: none;
  display: none; /* Did you forget this? */
}

.dropdown-content li {
  background-color: gray;
}  

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

<div class="menu">
    <ul class="menu-list">
        <li class="menu-list-item dropdown">
            <a href="https://blah.com/aboutus/">About US</a>
            <ul class="dropdown-content">
                <li class="menu-list-item">
                    <a href="https://blah.com/faq/">FAQ</a>
                </li>
                <li class="menu-list-item">
                    <a href="https://blah.com/page-2">Produkter</a>
                </li>
            </ul>
        </li>                  
        <li class="menu-list-item">
            <a href="#">Link</a>
        </li>
        <li class="menu-list-item">
            <a href="https://blah.com/contact-us">Kontakt Oss</a>
        </li>  
    </ul>
</div>

Answer 2

您需要在public function getUri() { try{ return $this->getModule('WebDriver')->_getCurrentUri(); }catch (ModuleException $e){ return ""; } } 类上添加display: none; CSS。 检查以下代码：

.dropdown-content

   .dropdown {
        position: relative;
        display: inline-block;
      }

    .dropdown-content ul  {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content li {
        background-color: gray;
    }  
    .dropdown-content {
        display: none;
    }

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

Answer 3

您必须先隐藏“无”。 您能检查一下Css的最后一部分吗？

.dropdown {
 position: relative;
 display: inline-block;
}

.dropdown-content ul {
 padding: 12px 16px;
 text-decoration: none;
 display: block;
}

.dropdown-content li {
 background-color: gray;
}

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

<div class="menu">
  <ul class="menu-list">
    <li class="menu-list-item dropdown">
      <a href="https://blah.com/aboutus/">About US</a>
      <ul class="dropdown-content">
        <li class="menu-list-item">
          <a href="https://blah.com/faq/">FAQ</a>
        </li>
        <li class="menu-list-item">
          <a href="https://blah.com/page-2">Produkter</a>
        </li>
      </ul>
    </li>
    <li class="menu-list-item">
      <a href="#">Link</a>
    </li>
    <li class="menu-list-item">
      <a href="https://blah.com/contact-us">Kontakt Oss</a>
    </li>
  </ul>
</div>

Answer 4

.dropdown {
        position: relative;
        display: inline-block;
      }

    .dropdown-content ul  {
        padding: 12px 16px;
        text-decoration: none; 
        display:none;
    }

    .dropdown-content li {
        background-color: gray;     
        display:none;
    }  

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

 <div class="menu">
            <ul class="menu-list">
                <li class="menu-list-item dropdown">
                    <a href="https://blah.com/aboutus/">About US</a>
                      
                    <ul class="dropdown-content" >
                        <li class="menu-list-item">
                            <a href="https://blah.com/faq/">FAQ</a>
                        </li>
                        <li class="menu-list-item">
                            <a href="https://blah.com/page-2">Produkter</a>
                        </li>
                    </ul>
                     </li> 
                              
                <li class="menu-list-item">
                    <a href="#">Link</a>
                </li>
                <li class="menu-list-item">
                    <a href="https://blah.com/contact-us">Kontakt Oss</a>
                </li>  
            </ul>
        </div>