li idドロップダウンメニューの色の問題

Question

私は現在uni用のWebサイトをコーディングしていますが、ドロップダウンメニューの問題を除いて、うまくいきます。私はいくつかのメニューオプション（ユーザが問題のページにいるとき）でliプロパティに "selected"というIDを与えて、色が暗いピンクに変わるようにしました。

ただし、「選択済み」の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>