下拉菜單顯示不正確

所以我試着根據W3Schools的HTML和CSS指南創建一個下拉菜單。下拉菜單顯示不正確

這是我的代碼，

ul { 
 
     position: absolute; 
 
     top: 200px; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background: rgba(0, 0, 0, 0.6); 
 
     width: 100%; 
 
    } 
 
    li { 
 
     float: left; 
 
     font-family: TW Cen MT Regular; 
 
     font-size: 156.25%; 
 
     height: 70px; 
 
     line-height: 70px; 
 
     width: 12%; 
 
    } 
 
    li a, .dropbtn { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover, .dropdownmenu:hover .dropbtn { 
 
     background: black; 
 
    } 
 
    li.dropdownmenu { 
 
     display: inline-block; 
 
    } 
 
    .dropdown-content { 
 
     display: none; 
 
     position: absolute; 
 
     background-color: red; 
 
     width: 12%; 
 
    } 
 
    .dropdown-content a { 
 
     color: white; 
 
     padding: 12px 16px; 
 
     text-decoration: none; 
 
     display: block; 
 
     text-align: left; 
 
    } 
 
    .dropdown-content a:hover { 
 
     color: #00fff6; 
 
    } 
 
    .dropdownmenu:hover .dropdown-content { 
 
     display: block; 
 
    }

<ul> 
 
     <li id="About"><a href="About.html">ABOUT</a></li> 
 
     <li id="Ongoing"><a href="NOTSET.html">NOTSET</a></li> 
 
     <li id="Completed" class="dropdownmenu"> 
 
      <a href="javascript:void(0)" class="dropbtn">COMPLETED</a> 
 
      <div class="dropdown-content"> 
 
      <a href="The Crispy.html">"The Crispy"</a> 
 
      <a href="New Project.html">New Project</a> 
 
      </div> 
 
     </li> 
 
     <li id="BuildLog"><a href="BuildLog.html">BUILD LOGS</a></li> 
 
     <li id="Contact"><a href="Contact.html">CONTACT</a></li> 
 
     </ul>

，它看起來像目前這樣，問題是當你看到下拉內容無法正常顯示當我懸停時。您可以在完成的部分底部看到非常小的紅色。

website

來源

2017-07-19 Crispybagel

我們告訴很多人W3School不好學。這是最好的例子。您可以在Google中找到許多優秀的摘要。

爲了解決您的問題，

刪除overflow: hidden從ul風格

ul { 
 
    position: absolute; 
 
    top: 200px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    /*overflow: hidden*/ 
 
    background: rgba(0, 0, 0, 0.6); 
 
    width: 100%; 
 
} 
 
li { 
 
    float: left; 
 
    font-family: TW Cen MT Regular; 
 
    font-size: 156.25%; 
 
    height: 70px; 
 
    line-height: 70px; 
 
    width: 12%; 
 
} 
 
li a, .dropbtn { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 
li a:hover, .dropdownmenu:hover .dropbtn { 
 
    background: black; 
 
} 
 
li.dropdownmenu { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 12%; 
 
} 
 
.dropdown-content a { 
 
    color: white; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
    color: #00fff6; 
 
} 
 
.dropdownmenu:hover .dropdown-content { 
 
    display: block; 
 
}

<ul> 
 
    <li id="About"><a href="About.html">ABOUT</a></li> 
 
    <li id="Ongoing"><a href="NOTSET.html">NOTSET</a></li> 
 
    <li id="Completed" class="dropdownmenu"> 
 
     <a href="javascript:void(0)" class="dropbtn">COMPLETED</a> 
 
     <div class="dropdown-content"> 
 
     <a href="The Crispy.html">"The Crispy"</a> 
 
     <a href="New Project.html">New Project</a> 
 
     </div> 
 
    </li> 
 
    <li id="BuildLog"><a href="BuildLog.html">BUILD LOGS</a></li> 
 
    <li id="Contact"><a href="Contact.html">CONTACT</a></li> 
 
    </ul>

來源

2017-07-19 09:57:00

只是刪除溢出UL CSS隱藏，它會正常工作。

ul { 
    position: absolute; 
    top: 200px; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    /*overflow: hidden*/ 
    background: rgba(0, 0, 0, 0.6); 
    width: 100%; 
}

來源

2017-07-19 10:10:32

感謝它的工作。 – Crispybagel

下拉菜單顯示不正確

回答

相關問題