CSS 菜单向下滑动答案

【问题标题】：CSS Menu Slide DownCSS 菜单向下滑动
【发布时间】：2017-01-25 18:31:33
【问题描述】：

我试图让我的菜单在悬停时向下滑动（看起来像是在缓慢移动，而不是只是弹出）。我发现了很多东西可以尝试，但似乎没有任何效果，这让我觉得我把代码放在了错误的地方。

由于下拉菜单的高度不同，我试图使用 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;  
}

【问题讨论】：

标签： css drop-down-menu transition

【解决方案1】：

试试这个代码

<!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>

【讨论】：