CSS 不會顯示下拉菜單

Question

我正在按照 weSchools 的本指南在我的導航欄中創建一個下拉菜單。

我的問題是它不會顯示，除非我刪除 CSS 屬性overflow: hidden從ul class 中隱藏。 這會破壞頁面的布局並刪除背景顏色等。

我試過display: block切換開/關，但下拉菜單不會出現，就像 w3school 教程一樣。

我認為在 CSS 中直接使用自定義 class .sticky而不是ul可能存在一些問題，它是繼承還是不繼承某些東西？

這是我的 HTML/CSS。 我已經多次檢查它以與 w3schools 示例進行比較，除了ul標簽之外找不到其他區別。 如果我從ul導航列表中刪除.sticky ，那么它會丟失格式並影響頁腳處的另一個ul 。 所以我需要為這個 header 導航列表定義一個自定義 class。

 .sticky { /*float: right;*/ /*color: white;*/ list-style-type: none; /*width: 100%;*/ margin: 0; padding: 0; overflow: hidden; border-radius: 0 0 10px 10px; background-color: #333; position: sticky; top: 0; z-index: 2; } li { float: right; /*padding-right: 20px;*/ /*padding-left: 20px;*/ color: white; } li a, .dropBtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-family: monospace; border-bottom: 2px solid #333; /*margin-bottom: 10px;*/ } li a:hover, .dropdown:hover.dropBtn { /*background-color: #454542;*/ text-decoration: none; color: white; /*border-radius: 10%;*/ padding: 14px 16px; border-bottom: 2px solid #fff922; } li.dropdown { 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); padding: 12px 16px; z-index: 1; }.dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover {background-color: #f1f1f1;}.dropdown:hover.dropdown-content{ display: block; /*border-bottom: 2px solid #fff922;*/ } li a:active { /*background-color: deeppink;*/ /* add some transition here */ }

 <ul class="sticky"> <li><a class="active" href="#contact">Contact</a></li> <li><a href="#">Projects</a></li> <li><a href="#about">About</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropBtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Item</a> <a href="#">Item</a> <a href="#">Item</a> <a href="#">Item</a> </div> </li> <li><a href="#home">Home</a></li> </ul>

Answer 1

刪除position:sticky; 從選擇器中， sticky是一個關鍵字，所以我已將其更改為Links以供參考。

 .Links { /*float: right;*/ /*color: white;*/ list-style-type: none; /*width: 100%;*/ margin: 0; padding: 0; overflow: hidden; border-radius: 0 0 10px 10px; background-color: #333; top: 0; z-index: 2; } li { float: right; /*padding-right: 20px;*/ /*padding-left: 20px;*/ color: white; } li a, .dropBtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-family: monospace; border-bottom: 2px solid #333; /*margin-bottom: 10px;*/ } li a:hover, .dropdown:hover.dropBtn { /*background-color: #454542;*/ text-decoration: none; color: white; /*border-radius: 10%;*/ padding: 14px 16px; border-bottom: 2px solid #fff922; } li.dropdown { 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); padding: 12px 16px; z-index: 1; }.dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; background-color: red; }.dropdown-content a:hover { background-color: red; }.dropdown:hover.dropdown-content { display: block; /*border-bottom: 2px solid #fff922;*/ }

 <ul class="Links"> <li><a class="active" href="#contact">Contact</a></li> <li><a href="#">Projects</a></li> <li><a href="#about">About</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropBtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Item</a> <a href="#">Item</a> <a href="#">Item</a> <a href="#">Item</a> </div> </li> <li><a href="#home">Home</a></li> </ul>

Answer 2

當然它可能很粘；）

 .sticky { /* float: right; */ /* color: white; */ list-style-type: none; /* width: 100%; */ margin: 0; padding: 0; /* overflow: hidden; */ border-radius: 0 0 10px 10px; background-color: #333; position: sticky; top: 0; z-index: 2; display: flex; flex-direction: row-reverse; } li { float: right; /*padding-right: 20px;*/ /*padding-left: 20px;*/ color: white; } li a, .dropBtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-family: monospace; border-bottom: 2px solid #333; /*margin-bottom: 10px;*/ } li a:hover, .dropdown:hover.dropBtn { /*background-color: #454542;*/ text-decoration: none; color: white; /*border-radius: 10%;*/ padding: 14px 16px; border-bottom: 2px solid #fff922; } li.dropdown { 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); padding: 12px 16px; z-index: 1; }.dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #f1f1f1; }.dropdown:hover.dropdown-content { display: block; /*border-bottom: 2px solid #fff922;*/ } li a:active { /*background-color: deeppink;*/ /* add some transition here */ }

 <ul class="sticky"> <li><a class="active" href="#contact">Contact</a></li> <li><a href="#">Projects</a></li> <li><a href="#about">About</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropBtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Item</a> <a href="#">Item</a> <a href="#">Item</a> <a href="#">Item</a> </div> </li> <li><a href="#home">Home</a></li> </ul> test <br> test <br> test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>

Answer 3

問題是你讓li元素float: right

float 屬性使元素脫離正常流程。

浮動 CSS 屬性將元素放置在其容器的左側或右側，允許文本和內聯元素環繞它。 該元素已從頁面的正常流程中刪除，但仍是流程的一部分。

因此，您的ul在渲染時實際上沒有任何高度，因此會導致此問題。 只需從li樣式規則中刪除 float 並使其display: inline-block 。

 .sticky { /*float: right;*/ /*color: white;*/ list-style-type: none; /*width: 100%;*/ margin: 0; padding: 0; border-radius: 0 0 10px 10px; background-color: #333; position: sticky; top: 0; z-index: 2; } li { display:inline-block; color: white; } li a, .dropBtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-family: monospace; border-bottom: 2px solid #333; /*margin-bottom: 10px;*/ } li a:hover, .dropdown:hover.dropBtn { /*background-color: #454542;*/ text-decoration: none; color: white; /*border-radius: 10%;*/ padding: 14px 16px; border-bottom: 2px solid #fff922; } li.dropdown { 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); padding: 12px 16px; z-index: 1; background: #000; }.dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover {background-color: #f1f1f1;}.dropdown:hover.dropdown-content{ display: block; /*border-bottom: 2px solid #fff922;*/ } li a:active { /*background-color: deeppink;*/ /* add some transition here */ }

 <ul class="sticky"> <li><a class="active" href="#contact">Contact</a></li> <li><a href="#">Projects</a></li> <li><a href="#about">About</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropBtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Item</a> <a href="#">Item</a> <a href="#">Item</a> <a href="#">Item</a> </div> </li> <li><a href="#home">Home</a></li> </ul>

Answer 4

完全固定，包括樣式： https://jsfiddle.net/L9nw5et0/

.sticky {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

li {
    float: right;
    color: white;
    margin: 0;
}

li a,
.dropBtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: monospace;
    padding-bottom: 16px;
}

li a:hover,
.dropdown:hover .dropBtn {
    text-decoration: none;
    color: white;
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 12px 16px;
    border-radius: 0 0 10px 10px;
}

.dropdown-content a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content {
    display: block;
}