드롭 다운 메뉴가 작동하지 않습니까?

Question

나는이 코드를 통해 작동하지 못하게하는 오류를 찾았지만 찾을 수없는 것 같습니다. 메뉴가 드롭 다운되지 않는 것을 제외하면 모두 잘 나타납니다. 누군가는 어떤 조언을 가지고 있습니까?

여기에 조각으로 내 코드입니다 :

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #5BC8C3; 
 
    position: fixed; 
 
    top: 60px; 
 
    width: 100%; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: #f7f7f7; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: #F7f7f7; 
 
} 
 
li.dropdown { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #284A64; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: #f7f7f7; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f7f7f7 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<ul> 
 
    <li><a class="active" href="#index">Home</a> 
 
    </li> 
 
    <li><a href="#catalog">Catalog</a> 
 
    </li> 
 
    <li><a href="#calendar">Calendar</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropbtn">Library Information</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#childrensprogram">Children's Programs</a> 
 
     <a href="#adultprograming">Adult Programs</a> 
 
     <a href="#help">Help Services</a> 
 
     <a href="#otherserv">Other Services</a> 
 
     <a href="#policy">Library Policies</a> 
 
    </div> 
 
    </li> 
 
    <li><a href="#contact">Contact</a> 
 
    </li> 
 
</ul>

어떤 조언을 주셔서 감사합니다!

는

Answer 1

음, 드롭 다운 메뉴 실제로 :)

을 보여줍니다 그러나 메뉴가

오버 플로우 때문에 우리는 그것을 볼 수 있습니다 : 숨겨진; 이 CSS 행을 삭제하면

, 메뉴가 작동합니다

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #5BC8C3; 
 
    position: fixed; 
 
    top: 60px; 
 
    width: 100%; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: #f7f7f7; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: #F7f7f7; 
 
} 
 
li.dropdown { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #284A64; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: #f7f7f7; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f7f7f7 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<ul> 
 
    <li><a class="active" href="#index">Home</a> 
 
    </li> 
 
    <li><a href="#catalog">Catalog</a> 
 
    </li> 
 
    <li><a href="#calendar">Calendar</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropbtn">Library Information</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#childrensprogram">Children's Programs</a> 
 
     <a href="#adultprograming">Adult Programs</a> 
 
     <a href="#help">Help Services</a> 
 
     <a href="#otherserv">Other Services</a> 
 
     <a href="#policy">Library Policies</a> 
 
    </div> 
 
    </li> 
 
    <li><a href="#contact">Contact</a> 
 
    </li> 
 
</ul>

Answer 2

ul{ 
    margin:0px; 
    padding:0px; 
    list-style:none; 

    } 

ul li{ 
    background-color:#5BC8C3; 
    width:150px; 
    height:50px; 
    float:left; 
    line-height:50px; 
    color:#0FC; 
    text-align:center; 
     } 
ul li a{ 
    color: #FFF; 
    text-decoration:none; 
    display:block; 
    }   
ul li a:hover{ 
    background-color:#F7f7f7; 
    } 

---

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Catalog</a></li> 
    <li><a href="#">Calender</a></li> 
    <li><a href="#">Library Information</a> 
    <ul> 
     <li><a href="#">Children's Programs</a></li> 
     <li><a href="#">Adult Programs</a></li> 
     <li><a href="#">Help Services</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Contact</a></li> 
</ul>