我試圖創建一個CSS下拉菜單，但遇到了一些問題，其中一些樣式元素仍然存在，有些則沒有。在我的codepen示例中，您會注意到，當您將鼠標懸停在「能力」上時，背景變爲深藍色，文本變爲白色，但當您移動到下一個列表項時，文本會變回原始深藍色。我想讓它保持白色。我嘗試從導航欄中刪除顏色屬性。嘗試在純CSS下拉菜單中保留某些樣式元素
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
just add code in css: (please run code in full screen)
nav li:hover > a, nav li a.active {
color:#FFFFFF;
}
body {
\t font-size:14px;
\t font-family: Arial;
\t line-height: 1.5;
}
main {
\t width:100%;
}
header {
\t margin-bottom:10px;
\t width:80%;
\t vertical-align:middle;
\t /*box-shadow: 0px 5px 3px rgba(0,0,0,0.25);*/
}
select {
\t margin-top:10px;
\t font-size:1em;
}
nav ul {
\t background: background: rgba(255, 255, 255, 0.1);
\t vertical-align: middle;
\t padding: 0 0.625em;
\t /*margin-left:1.25em;*/
\t list-style: none;
\t position: relative;
\t display: inline-table;
}
nav ul ul {
\t display:none;
}
nav ul ul li {
\t float:none;
\t position:relative;
\t
\t color:#fff;
}
nav ul li:hover > ul {
\t display:block;
\t background:#fff;
}
nav ul ul ul {
\t position: absolute; left: 100%; top:0;
}
nav ul li a {
\t \t display: block; padding: 1em 2em;
\t \t color: #003c7d; text-decoration: none;
\t \t font-size:1.15em;
\t }
nav ul li a:hover {
\t \t color:#fff;
\t }
\t nav li:hover > a, nav li a.active {
color:#FFFFFF;
}
nav ul li a:active{
\t \t color:#fff;
\t }
nav ul li:hover {
\t background: #003c7d;
}
li {
\t float:left;
\t 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>
\t <ul>
<li><a href="#">Physician as Healer [A]</a>
\t <ul>
\t <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>
\t <ul>
\t <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>
\t <ul>
\t <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>
\t <ul>
\t <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>
\t <ul>
\t <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>
\t <ul>
\t <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>
\t <ul>
\t <li><a href="#">G1</a></li>
<li><a href="#">G2</a></li>
<li><a href="#">G3</a></li>
</ul>
\t </ul>
</li>
\t \t \t </ul>
</nav>