簡單的下拉菜單與導航欄中的CSS

我想創建一個簡單的下拉菜單（只有CSS）在一個導航欄中有多個鏈接，問題是下拉菜單將顯示每個鏈接，而不僅僅是所需的一個。下面是代碼：簡單的下拉菜單與導航欄中的CSS

HTML CSS &

ul { 
 
    list-style: none; 
 
} 
 

 
.topNav { 
 
    background-color: #ff66b3; 
 
    overflow: hidden; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    position: relative; 
 
} 
 

 
.topNav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 8px; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
} 
 

 
.topNav a:hover { 
 
    background-color: #ffb3d9; 
 
    color: black; 
 
} 
 

 
.dropDown { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
    min-width: 160px; 
 
} 
 

 
.dropDown a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.topNav .mainLink:hover .dropDown { 
 
    display: block; 
 
}

<div class="topNav" id="myTopnav"> 
 
    <a class="mainLink" id="menuIcon" href="#home">&#9776</a> 
 
    <a class="mainLink" href="#home">NerdBook</a> 
 
    <div class="dropDown"> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
    </div> 
 
</div>

下拉將只顯示在「menuIcon」鏈接。

來源

2017-04-11 Simone

將'.mainLink：hover'更改爲'#menuIcon：hover' ...但實際上，當我將代碼放入代碼段時，您的代碼無效，下拉式代碼不會將鏈接的子代更改爲'#menuIcon：懸停〜.dropDown' – DaniP

@ DaniP已經完成了，並沒有工作。 – Simone

@DaniP好吧，那有點作品，但當你移動指針時，菜單會淡出，並且它也是內聯而不是下拉 – Simone

您已經在要觸發:hover的<a>標籤上有一個ID，因此可以將其用作參考選擇器。此外，您的代碼不起作用，因爲.dropDown ins't你的鏈接的子更改以匹配的兄弟姐妹：

#menuIcon：懸停〜.dropDown

ul { 
 
    list-style: none; 
 
} 
 
.topNav { 
 
    background-color: #ff66b3; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    position: relative; 
 
} 
 
.topNav:after { 
 
    content:""; 
 
    display:table; 
 
    clear:both; 
 
} 
 
.topNav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 8px; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
} 
 
.topNav a:hover { 
 
    background-color: #ffb3d9; 
 
    color: black; 
 
} 
 
.dropDown { 
 
    background:#e1e1e1; 
 
    display: none; 
 
    position: absolute; 
 
    top:100%; 
 
    z-index: 1; 
 
    min-width: 160px; 
 
} 
 

 
.dropDown a { 
 
    float:none; 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
#menuIcon:hover ~ .dropDown, .dropDown:hover { 
 
    display: block; 
 
}

<div class="topNav" id="myTopnav"> 
 
    <a class="mainLink" id="menuIcon" href="#home">&#9776</a> 
 
    <a class="mainLink" href="#home">NerdBook</a> 
 
    <div class="dropDown"> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
    </div> 
 
</div>

來源

2017-04-11 14:26:06 DaniP

我已經回答你了 – Simone

是@@@@@imim檢查現在編輯的代碼段正在對你CSS – DaniP

確定它比我想要的更可能。但鏈接仍然是內聯的，不像下拉菜單。 – Simone

簡單的下拉菜單與導航欄中的CSS

回答

相關問題