尝试在纯CSS下拉菜单中保留某些样式元素

Question

我试图创建一个CSS下拉菜单，但遇到了一些问题，其中一些样式元素仍然存在，而另一些则没有。在我的codepen示例中，当您将鼠标悬停在＆＃34; Competencies＆＃34;上时，您会注意到背景变为深蓝色，文本变为白色，但当您移动到下一个列表项时，文本会变回原始的深蓝色。我希望它保持白色。我尝试过从nav ul li中删除颜色属性。

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><a href="ms1.php">MS-1</a></li>
                <li><a href="ms2.php">MS-2</a></li>
                <li><a href="ms3.php">MS-3</a></li>
                <li><a href="ms4.php">MS-4</a></li>
                <li style="font-weight:bold"><a href="compTest.php">Competencies</a>
                	<ul>
                     <li><a href="#">Physician as Healer [A]</a>
                     	<ul>
                        	<li><a href="#">A1</a></li>
                            <li><a href="#">A2</a></li>
                            <li><a href="#">A3</a></li>
                        </ul>
                     <li><a href="#">Physician as Scientist [B]</a>
                     	<ul>
                        	<li><a href="#">B1</a></li>
                            <li><a href="#">B2</a></li>
                            <li><a href="#">B3</a></li>
                        </ul>
                     <li><a href="#">Physician as Advocate [C]</a>
                     	<ul>
                        	<li><a href="#">C1</a></li>
                            <li><a href="#">C2</a></li>
                            <li><a href="#">C3</a></li>
                        </ul>
                      <li><a href="#">Physician as Educator [D]</a>
                     	<ul>
                        	<li><a href="#">D1</a></li>
                            <li><a href="#">D2</a></li>
                            <li><a href="#">D3</a></li>
                        </ul>
                     <li><a href="#">Physician as Colleague [E]</a>
                     	<ul>
                        	<li><a href="#">E1</a></li>
                            <li><a href="#">E2</a></li>
                            <li><a href="#">E3</a></li>
                        </ul>
                     <li><a href="#">Physician as Role Model [F]</a>
                     	<ul>
                        	<li><a href="#">F1</a></li>
                            <li><a href="#">F2</a></li>
                            <li><a href="#">F3</a></li>
                        </ul>
                      <li><a href="#">Physician as Life-long Learner [G]</a>
                     	<ul>
                        	<li><a href="#">G1</a></li>
                            <li><a href="#">G2</a></li>
                            <li><a href="#">G3</a></li>
                        </ul>
                	</ul>
                  </li>
			</ul>
        </nav>