ドロップダウンメニューが機能しませんか？

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>