li id colour issue on dropdown menu - html

Question

I'm coding a website for uni right now and it's going pretty well, with the exception of a dropdown menu issue. I've given the li property an ID of "selected" on some menu options (when the user is on the page in question), so that it changes colour to a dark pink.
However, the dropdown options underneath whatever has the li id of "selected" all turn dark pink too. When I add a closed li tag at the end of "about" in the html, the dropdown doesn't appear at all.
I'll post the relevant html and CSS as well as screenshots, hopefully someone could help me, please!
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
Here's all of the dropdown code:
/*----- 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">
about <span class="arrow">▼</span>
<ul class="sub-menu">
<li>history</li>
<li>values</li>
<li>the truck</li>
<li>produce info.</li>
</ul>
</li>

Answer 1

You did not select correctly the link below the #selected list item.
.menu > ul > li#selected a /*This selects all links below the selected li, including links in child list items*/
should be
.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">
about <span class="arrow">▼</span>
<ul class="sub-menu">
<li>history</li>
<li>values</li>
<li>the truck</li>
<li>produce info.</li>
</ul>
</li>