具有悬停效果的导航栏

Question

我想制作一个带有悬停效果的导航栏。

目标是当您将鼠标悬停在其上时，会显示更多内容。

但是，当您将鼠标悬停在导航栏上并且显示内容时，我希望当您将鼠标悬停在该内容上时显示更多内容。

像这样的东西。

我希望你明白我的意思。

Answer 1

你的意思是当你悬停时下拉吗？我创建了一个codesandbox，其中包含我认为你的意思https://codesandbox.io/s/awesome-shockley-qosw6html:<div class="navbar">&nbsp; <a href="#home">Home</a>&nbsp; <a href="#news">News</a>&nbsp; <div class="dropdown">&nbsp; &nbsp; <button class="dropbtn">Dropdown&nbsp; &nbsp; &nbsp; <i class="fa fa-caret-down"></i>&nbsp; &nbsp; </button>&nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; <a href="#">Link 1</a>&nbsp; &nbsp; &nbsp; <a href="#">Link 2</a>&nbsp; &nbsp; &nbsp; <a href="#">Link 3</a>&nbsp; &nbsp; </div>&nbsp; </div></div>CSS：/* Navbar container */.navbar {&nbsp; overflow: hidden;&nbsp; background-color: #333;&nbsp; font-family: Arial;}/* Links inside the navbar */.navbar a {&nbsp; float: left;&nbsp; font-size: 16px;&nbsp; color: white;&nbsp; text-align: center;&nbsp; padding: 14px 16px;&nbsp; text-decoration: none;}/* The dropdown container */.dropdown {&nbsp; float: left;&nbsp; overflow: hidden;}/* Dropdown button */.dropdown .dropbtn {&nbsp; font-size: 16px;&nbsp; border: none;&nbsp; outline: none;&nbsp; color: white;&nbsp; padding: 14px 16px;&nbsp; background-color: inherit;&nbsp; font-family: inherit; /* Important for vertical align on mobile phones */&nbsp; 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 {&nbsp; background-color: red;}/* Dropdown content (hidden by default) */.dropdown-content {&nbsp; display: none;&nbsp; position: absolute;&nbsp; background-color: #f9f9f9;&nbsp; min-width: 160px;&nbsp; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);&nbsp; z-index: 1;}/* Links inside the dropdown */.dropdown-content a {&nbsp; float: none;&nbsp; color: black;&nbsp; padding: 12px 16px;&nbsp; text-decoration: none;&nbsp; display: block;&nbsp; text-align: left;}/* Add a grey background color to dropdown links on hover */.dropdown-content a:hover {&nbsp; background-color: #ddd;}/* Show the dropdown menu on hover */.dropdown:hover .dropdown-content {&nbsp; display: block;}