我试图让我的菜单在悬停时向下滑动(看起来像缓慢移动而不是弹出)。我发现了很多东西可以尝试，但似乎没有任何效果，这让我觉得我把代码放在了错误的地方。
由于下拉菜单的高度不同，我试图使用 max-height 来使其工作。
提前感谢您的宝贵时间。
<div id="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li class="dropdown"><a href="#" class="dropdown-btn">LEAGUE INFO</a>
<div class="dropdown-menu">
<a href="aboutus.html">About Us</a>
<a href="contactus.html">Contact Us</a>
<a href="location.html">Location</a>
<a href="bod.html">B.O.D.</a>
<a href="fields.html">Field Locations</a>
<a href="boundarymap.html">Boundary Map</a>
<a href="history.html">History</a>
</div>
</li>
<li class="dropdown"><a href="#" class="dropdown-btn">SEASON INFO</a>
<div class="dropdown-menu">
<a href="standings.html">Standings</a>
<a href="schedules.html">Game Schedules</a>
<a href="homerunclub.html">Home Run Club</a>
</div>
</li>
<li><a href="photos.html">PHOTOS</a></li>
<li class="dropdown"><a href="#" class="dropdown-btn">MISC.</a>
<div class="dropdown-menu">
<a href="docs.html">Documents</a>
<a href="faq.html">FAQ's</a>
<a href="equipment.html">Equipment</a>
<a href="howto.html">How To...</a>
<a href="rules.html">Local Rules</a>
<a href="archives.html">Archives</a>
</div>
</li>
<li><a href="socialmedia.html">SOCIAL MEDIA</a></li>
</ul>
</div>
#navbar {
max-width: 960px;
background-color: rgba(0,0,0,.3);
border: 1px #000000 solid;
border-bottom: 0px;
font-family: 'Montserrat', sans-serif;
font-weight: normal !important;
}
ul {
list-style-type: none;
margin: auto;
display: table;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-btn {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: .5s;
}
li a:hover, .dropdown:hover .dropdown-btn {
background-color: rgba(255,0,0,.8);
color: #000000;
}
li .dropdown {
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: rgba(0,0,128,1);
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1);
}
.dropdown-menu a {
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: rgba(255,0,0,1);
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
最佳答案
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
关于CSS 菜单向下滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41858986/