後，我有這樣的CSS：如何使一個CSS菜單仍然可見孩子已被點擊
#menuBar {
/*width: 960px;*/
height: 35px;
clear: both;
}
ul#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background-color: #0068b4;
}
ul#nav li {
display: inline;
}
ul#nav li a {
float: left;
line-height: 35px;
color: #ffffff;
text-decoration: none;
margin: 0;
padding: 0 30px;
background-color: #0068b4;
}
/* APPLIES THE ACTIVE STATE TO PARENT*/
ul#nav .currentParent a, ul#nav li:hover > a {
color: #ffffff;
text-decoration: none;
background: #005899;
}
/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav ul {
display: none;
}
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
position: absolute;
display: block;
width: 97%;
height: 35px;
margin: 35px 0 0 0;
background-color: #e0e0e0;
}
ul#nav li:hover > ul li a {
float: left;
line-height: 35px;
color: #000000;
text-decoration: none;
margin: 0;
padding: 0 30px 0 30px;
background-color: #e0e0e0;
}
/* APPLIES THE ACTIVE STATE TO CHILD*/
ul#nav li ul li.currentChild a, ul#nav li:hover > ul li a:hover {
color: #000000;
text-decoration: none;
background-color: #afafaf;
}
而這個HTML：
<div id="menuBar">
<ul id="nav">
<li><a href="javascript: void;">Menu 1</a>
<ul>
<li><a href="menu1submenuitem1.html">Menu 1 Submenu item 1</a></li>
<li><a href="menu1submenuitem2.html">Menu 1 Submenu item 2</a></li>
<li><a href="menu1submenuitem3.html">Menu 1 Submenu item 3</a></li>
</ul>
</li>
<li><a href="javascript: void;">Menu 2</a>
<ul>
<li><a href="menu2submenuitem1.html">Menu 2 Submenu item 1</a></li>
<li><a href="menu2submenuitem2.html">Menu 2 Submenu item 2</a></li>
</ul>
</li>
<li class="currentParent"><a href="javascript: void;">Menu 3</a>
<ul>
<li><a href="menu3submenuitem1.html">Menu 3 Submenu item 1</a></li>
<li class="currentChild"><a href="menu3submenuitem2.html">Menu 3 Submenu item 2</a></li>
<li><a href="menu3submenuitem3.html">Menu 3 Submenu item 3</a></li>
</ul>
</li>
</ul>
</div>
我用這個來顯示兩級水平菜單。我想要實現的是，當點擊第二級選項時，我希望父級和子級本身保持突出顯示。爲此，我實際上在我的ASP.net頁面後面的代碼中構建了菜單的HTML，並使用樣式：currentParent和currentChild來突出顯示它們。這是工作，我無法弄清楚是如何使包含被點擊的孩子保持可見的第二級。我試過在很多地方加入display: none，但沒有任何工作。我想知道是否有人可以幫助我，並給我一些建議，我需要添加到CSS來實現這一點的修改？
編輯1：
我已經完成了代碼，並審查了它的工作（你可以在這裏看到：http://jsfiddle.net/cesarvinas/ZQWe7/）。您可以在我申請的類當前父到上級菜單菜單3和類currentChild到子菜單項菜單3子菜單項2的HTML代碼中看到。有了這個，父母和孩子現在突出顯示。此外，我想要的是包含子菜單項（灰色）的行：菜單3子菜單項目1,菜單3子菜單項目2和菜單3子菜單項目3仍然可見。
正如我在主要文章中解釋的，我已經將代碼添加到ASP .net頁面後面的代碼中，以構建HTML並在必要時分配CSS類。
有沒有辦法讓我可以分配給父類<li>（在這個例子中，菜單3家長），以保持其子可見的CSS類？
EDIT 2個
感謝我在這裏收到，特意從3dgoo的幫助下，這幾乎是完成的。我在這裏更新了示例：http://jsfiddle.net/cesarvinas/ZQWe7/5/。但是，爲了使不是最新的子菜單項目保持銀色（而不是像3dgoo示例中的那樣是藍色），我必須創建另一個CSS類「.notselected」，用於那些未被選中的子菜單項。我的問題是：有沒有辦法實現相同的，而不必添加額外的CSS類？這是我做了什麼：
ul#nav li ul li.notselected a,
ul#nav li:hover > ul li a {
float: left;
line-height: 35px;
color: #000000;
text-decoration: none;
margin: 0;
padding: 0 30px 0 30px;
background-color: #e0e0e0;
}
和HTML：
<li class="currentParent"><a href="#">Menu 3</a>
<ul>
<li class="notselected"><a href="#">Menu 3 Submenu item 1</a></li>
<li class="currentChild"><a href="#">Menu 3 Submenu item 2</a></li>
<li class="notselected"><a href="#">Menu 3 Submenu item 3</a></li>
</ul>
</li>
我這個在CSS嘗試：
ul#nav li ul li a,
ul#nav li:hover > ul li a {
float: left;
line-height: 35px;
color: #000000;
text-decoration: none;
margin: 0;
padding: 0 30px 0 30px;
background-color: #e0e0e0;
}
，並從HTML移除class="notselected" ，但它不起作用。這是爲什麼？
謝謝。
您當前的代碼無效，請參閱：http://jsfiddle.net/kSWAd/1/。請更新/修復它，並更清楚地解釋你想要做什麼。 – Shomz
對不起，舒姆茲。我已經修復了帖子中的代碼，並且創建了這個：http://jsfiddle.net/cesarvinas/ZQWe7/，以便您可以查看。我還在** EDIT 1 **中添加了更多解釋，請讓我知道現在它是否更清晰。我希望你能幫忙。 –
沒問題，只是想幫忙。現在更清楚了，我會給你寫一個答案。 – Shomz