具有悬停效果的导航栏

Question

我想制作一个带有悬停效果的导航栏。目标是当您将鼠标悬停在其上时，会显示更多内容。但是，当您将鼠标悬停在导航栏上并且显示内容时，我希望当您将鼠标悬停在该内容上时显示更多内容。像这样的东西。我希望你明白我的意思。

Answer 1

你的意思是当你悬停时下拉吗？

我创建了一个codesandbox，其中包含我认为你的意思

https://codesandbox.io/s/awesome-shockley-qosw6

html:

<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div>

</div>

CSS：

/* Navbar container */

.navbar {

  overflow: hidden;

  background-color: #333;

  font-family: Arial;

}

/* Links inside the navbar */

.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}

/* The dropdown container */

.dropdown {

  float: left;

  overflow: hidden;

}

/* Dropdown button */

.dropdown .dropbtn {

  font-size: 16px;

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit; /* Important for vertical align on mobile phones */

  margin: 0; /* Important for vertical align on mobile phones */

}

/* Add a red background color to navbar links on hover */

.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}

/* Dropdown content (hidden by default) */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}

/* Links inside the dropdown */

.dropdown-content a {

  float: none;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}

/* Add a grey background color to dropdown links on hover */

.dropdown-content a:hover {

  background-color: #ddd;

}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {

  display: block;

}