如何在懸停上添加下拉菜單？

Question

我在頁面頂部有一個水平導航欄，其中包含以下代碼。當我將鼠標懸停在Columns選項卡上時，我想要的是一個帶有以下選項列表的下拉菜單：

文章

影片

面試

時尚

這是我想要的圖像：

 nav { position: fixed; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.90); height: 60px; overflow: hidden; z-index: 100; } ul { position: absolute; right: 50px; line-height: 60px; height: 60px; } ul li { display: inline-block; position: relative; height: 100%; } ul li a { text-decoration: none; font-family: 'raleway'; font-size: 23px; line-height: 60px; display: inline-block; padding-left: 15px; padding-right: 15px; color: white; box-sizing: border-box; } 

 <nav> <ul> <li><a href="">Home</a> <li><a href="about/column.html">Columns</a> <li><a href="about/">Team Thrive</a> </ul> </nav> 

Answer 1

您的代碼中有一些問題。 您必須關閉li標簽。 然后，您必須先添加下拉菜單的HTML結構，例如，像這樣：

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="about/column.html">Dropdown here</a>
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </li>
    <li><a href="about/">Team Thrive</a></li>
  </ul>
</nav>

然后，使用CSS的一小部分使其在li上處於懸停狀態並與display: block;一起玩display: block; 並display: none;

查看工作提琴

Answer 2

在以下官方w3schools鏈接上可以找到您的問題的答案： http : //www.w3schools.com/howto/howto_css_dropdown.asp

Answer 3

較早發布的W3學校鏈接是解決此特定問題的重要資源。 使用該資源在小提琴演奏中發揮作用。

可以通過將html更改為以下內容來完成：

<nav>
  <ul>
  <li><a href="">Home</a></li>
  <li><div class="columns"><a href="about/column.html">Columns</a>
    <div class="dropdown">
    <a href="#">Articles</a>
    <a href="#">Videos</a>
    <a href="#">Interviews</a>
    <a href="#">Fashion</a>
  </div>
  </div>
  </li>
  <li><a href="about/">Team Thrive</a></li>
  </ul>
</nav>

並將以下內容添加到您的CSS中。 您還需要刪除溢出：隱藏在導航CSS中。

.columns {
  display: relative;
}

.dropdown {
    display: none;
    position: absolute;
}

.columns:hover .dropdown {
    display: block;
}