CSS Menu Slide Down

私のメニューをホバー上に滑らせるようにしようとしています（ポップアップするのとは対照的に、ゆっくり動くように見えます）。私は試してみることがたくさんあるが、何もうまくいかないと思われるので、間違った場所にコードを入れていると思うように思える。CSS Menu Slide Down

ドロップダウンメニューの高さが異なるため、最大高さを使用して動作させようとしていました。

お時間を頂きましてありがとうございます。

<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; 
}

出典

2017-01-25 scottastrophik

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

このコードを試してみてください

出典

2017-01-25 18:34:56

CSS Menu Slide Down

答えて

関連する問題