li id下拉菜單上的顏色問題

Question

我現在正在爲uni編寫一個網站，並且它會很好，除了下拉菜單問題。我已經在某些菜單選項（當用戶在頁面上時）給li屬性一個「selected」的ID，以便它將顏色更改爲深粉色。

但是，任何具有「選定」內容的下拉選項都會變成深粉紅色。當我在html的「about」的末尾添加一個閉合的li標籤時，下拉菜單根本不會出現。

我會發布相關的html和CSS以及截圖，希望有人可以幫助我！

• THIS is how a dropdown menu (without the id of "selected") looks normally. the links work and it goes slightly darker when i hover over, which is what i want

• whereas THIS has the "selected" id. i don't want the dropdown menu this colour - JUST the "about" box

這裏的所有下拉代碼：

/*----- Menu Outline -----*/ 
 
.menu-wrap { 
 
    width:100%; 
 
    box-shadow:0px 1px 3px rgba(0,0,0,0.2); 
 
    background:#ffeff8; 
 
} 
 
    
 
.menu { 
 
    width:1000px; 
 
    margin:0px auto; 
 
} 
 
    
 
.menu li { 
 
    margin:0px; 
 
    list-style:none; 
 
    font-family:"Luna"; 
 
    text-transform: lowercase; 
 
    border:1px solid #ed85c4; 
 
} 
 
    
 
.menu a { 
 
    transition:all linear 0.15s; 
 
    color:#ed85c4; 
 
    background:#ffeff8; 
 
} 
 
    
 
.menu li:hover > a, .menu .current-item > a { 
 
    text-decoration:none; 
 
    color:#d771ae; 
 
} 
 
    
 
.menu .arrow { 
 
    font-size:10px; 
 
    line-height:0%; 
 
} 
 
    
 
/*----- Top Level -----*/ 
 
.menu > ul > li { 
 
    float:left; 
 
    display:inline-block; 
 
    position:relative; 
 
    font-size:14px; 
 
} 
 
    
 
.menu > ul > li > a { 
 
    padding:3px 40px; 
 
    display:inline-block; 
 
    text-shadow:0px 0px 0px rgba(0,0,0,0.4); 
 
} 
 
    
 
.menu > ul > li:hover > a, .menu > ul > a { 
 
    background:#f1dae8; 
 
} 
 

 
.menu > ul > li#selected a{ 
 
    color: #ffeff8; 
 
    background: #c864a1; 
 
} 
 

 
    
 
/*----- Bottom Level -----*/ 
 
.menu li:hover .sub-menu { 
 
    z-index:1; 
 
    opacity:1; 
 
} 
 
    
 
.sub-menu { 
 
    width:100%; 
 
    padding:0px 0px; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0px; 
 
    z-index:-1; 
 
    opacity:0; 
 
    transition:opacity linear 0.15s; 
 
    box-shadow:0px 0px 0px rgba(0,0,0,0.2); 
 
} 
 
    
 
.sub-menu li { 
 
    display:block; 
 
    font-size:12px; 
 
    text-transform: lowercase; 
 
    font-kerning: auto; 
 
} 
 
    
 
.sub-menu li a { 
 
    padding:10px 30px; 
 
    display:block; 
 
    background: #ffeff8; 
 
} 
 
    
 
.sub-menu li a:hover, .sub-menu a { 
 
    background: #f1dae8; 
 
}

<div class="menu-wrap"> 
 
    <nav class="menu"> 
 
     <ul class="clearfix"> 
 
      <li id="selected"> 
 
       <a href="/about-us.html">about <span class="arrow">&#9660;</span></a> 
 
    
 
        <ul class="sub-menu"> 
 
        <li><a href="/history.html">history</a></li> 
 
        <li><a href="/values.html">values</a></li> 
 
        <li><a href="/truck.html">the truck</a></li> 
 
        <li><a href="/produce.html">produce info.</a></li> 
 
       </ul> 
 
      </li>

Answer 1

您沒有正確選擇#selected列表項下方的鏈接。

.menu > ul > li#selected a /*This selects all links below the selected li, including links in child list items*/ 

應該

.menu > ul > li#selected > a /* this selects the immediate descendent link only */ 

Answer 2

/*----- Menu Outline -----*/ 
 
.menu-wrap { 
 
    width:100%; 
 
    box-shadow:0px 1px 3px rgba(0,0,0,0.2); 
 
    background:#ffeff8; 
 
} 
 
    
 
.menu { 
 
    width:1000px; 
 
    margin:0px auto; 
 
} 
 
    
 
.menu li { 
 
    margin:0px; 
 
    list-style:none; 
 
    font-family:"Luna"; 
 
    text-transform: lowercase; 
 
    border:1px solid #ed85c4; 
 
} 
 
    
 
.menu a { 
 
    transition:all linear 0.15s; 
 
    color:#ed85c4; 
 
    background:#ffeff8; 
 
} 
 
    
 
.menu li:hover > a, .menu .current-item > a { 
 
    text-decoration:none; 
 
    color:#d771ae; 
 
} 
 
    
 
.menu .arrow { 
 
    font-size:10px; 
 
    line-height:0%; 
 
} 
 
    
 
/*----- Top Level -----*/ 
 
.menu > ul > li { 
 
    float:left; 
 
    display:inline-block; 
 
    position:relative; 
 
    font-size:14px; 
 
} 
 
    
 
.menu > ul > li > a { 
 
    padding:3px 40px; 
 
    display:inline-block; 
 
    text-shadow:0px 0px 0px rgba(0,0,0,0.4); 
 
} 
 
    
 
.menu > ul > li:hover > a, .menu > ul > a { 
 
    background:#f1dae8; 
 
} 
 

 
.menu > ul > li#selected >a{ 
 
    color: #ffeff8; 
 
    background: #c864a1; 
 
} 
 

 
    
 
/*----- Bottom Level -----*/ 
 
.menu li:hover .sub-menu { 
 
    z-index:1; 
 
    opacity:1; 
 
} 
 
    
 
.sub-menu { 
 
    width:100%; 
 
    padding:0px 0px; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0px; 
 
    z-index:-1; 
 
    opacity:0; 
 
    transition:opacity linear 0.15s; 
 
    box-shadow:0px 0px 0px rgba(0,0,0,0.2); 
 
} 
 
    
 
.sub-menu li { 
 
    display:block; 
 
    font-size:12px; 
 
    text-transform: lowercase; 
 
    font-kerning: auto; 
 
} 
 
    
 
.sub-menu li a { 
 
    padding:10px 30px; 
 
    display:block; 
 
    background: #ffeff8; 
 
} 
 
    
 
.sub-menu li a:hover, .sub-menu a { 
 
    background: #f1dae8; 
 
}

<div class="menu-wrap"> 
 
    <nav class="menu"> 
 
     <ul class="clearfix"> 
 
      <li id="selected"> 
 
       <a href="/about-us.html">about <span class="arrow">&#9660;</span></a> 
 
    
 
        <ul class="sub-menu"> 
 
        <li><a href="/history.html">history</a></li> 
 
        <li><a href="/values.html">values</a></li> 
 
        <li><a href="/truck.html">the truck</a></li> 
 
        <li><a href="/produce.html">produce info.</a></li> 
 
       </ul> 
 
      </li>