Trying to retain certain style elements in pure CSS drop-down menu - html

Question

I'm trying to create a CSS dropdown menu but have run into an issue where some style elements remain and some do not. In my codepen example you'll notice that when you hover over "Competencies" the background changes to a dark blue and the the text to white but when you move to the next list item, the text changes back to the original dark blue color. I'd like for it to remain white. I've tried removing the color attribute from nav ul li a.
nav ul li a {
display: block; padding: 1em 2em;
color: #003c7d; text-decoration: none;
font-size:1.15em;
}
nav ul li a:hover {
color:#fff;
}
http://codepen.io/anon/pen/aDBeK

Answer 1

just add code in css: (please run code in full screen)
nav li:hover > a, nav li a.active {
color:#FFFFFF;
}
body {
font-size:14px;
font-family: Arial;
line-height: 1.5;
}
main {
width:100%;
}
header {
margin-bottom:10px;
width:80%;
vertical-align:middle;
/*box-shadow: 0px 5px 3px rgba(0,0,0,0.25);*/
}
select {
margin-top:10px;
font-size:1em;
}
nav ul {
background: background: rgba(255, 255, 255, 0.1);
vertical-align: middle;
padding: 0 0.625em;
/*margin-left:1.25em;*/
list-style: none;
position: relative;
display: inline-table;
}
nav ul ul {
display:none;
}
nav ul ul li {
float:none;
position:relative;
color:#fff;
}
nav ul li:hover > ul {
display:block;
background:#fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul li a {
display: block; padding: 1em 2em;
color: #003c7d; text-decoration: none;
font-size:1.15em;
}
nav ul li a:hover {
color:#fff;
}
nav li:hover > a, nav li a.active {
color:#FFFFFF;
}
nav ul li a:active{
color:#fff;
}
nav ul li:hover {
background: #003c7d;
}
li {
float:left;
vertical-align:middle;
}
<nav>
<ul>
<li>MS-1</li>
<li>MS-2</li>
<li>MS-3</li>
<li>MS-4</li>
<li style="font-weight:bold">Competencies
<ul>
<li>Physician as Healer [A]
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
<li>Physician as Scientist [B]
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
<li>Physician as Advocate [C]
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
<li>Physician as Educator [D]
<ul>
<li>D1</li>
<li>D2</li>
<li>D3</li>
</ul>
<li>Physician as Colleague [E]
<ul>
<li>E1</li>
<li>E2</li>
<li>E3</li>
</ul>
<li>Physician as Role Model [F]
<ul>
<li>F1</li>
<li>F2</li>
<li>F3</li>
</ul>
<li>Physician as Life-long Learner [G]
<ul>
<li>G1</li>
<li>G2</li>
<li>G3</li>
</ul>
</ul>
</li>
</ul>
</nav>