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

답변

관련 문제