1
我試圖創建一個兩級水平導航菜單（或菜單欄），當您將鼠標懸停在父菜單項上時，顯示子菜單項。如果選擇了其中一個子項目，則父項目具有可視指示符，即當前頁面對應於其子項目之一，並且其子項目保持顯示。CSS如何隱藏當父母的兄弟項目沒有javascript懸停當前的子菜單項
CHILD2是當前頁面：
parent1 *parent2* parent3
|
child1 *child2* child3
當我將鼠標懸停在parent1或parent3，按需要顯示自己的孩子。我的挑戰是，當其他父母的孩子被展示時，我無法弄清楚如何隱藏父母2的孩子。有沒有一種CSS方式來實現這一點？我知道我可以使用jquery隱藏parent2的孩子，當將鼠標移出parent2和parent2的孩子時，但我寧願不必爲了最大的可用性而使用javascript。
這裏一住就是example
CSS：
ul.AspNet-Menu
{
position: relative;
}
ul.AspNet-Menu,
ul.AspNet-Menu ul
{
margin: 0;
padding: 0;
display: block;
}
ul.AspNet-Menu li
{
position: static;
list-style: none;
float: left;
}
ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
display: block;
text-decoration: none;
}
ul.AspNet-Menu ul
{
visibility: hidden;
position: absolute;
}
ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
visibility: hidden;
}
ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
visibility: visible;
}
.main-nav2 .AspNet-Menu-Horizontal{
margin: 0;
padding: 0;
font: bold 13px/16px Arial, sans-serif;
position: absolute;
top: 21px;
left: 290px;
}
.main-nav2 ul.AspNet-Menu li {
display: inline;
}
.main-nav2 ul.AspNet-Menu li a,
.main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink {
color: #fff;
background: url(../../nav-bg.gif) no-repeat 0 -24px;
height: 24px;
text-decoration: none;
margin: 0 1px 0 0;
}
.main-nav2 ul.AspNet-Menu li a span,
.main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink span {
background: url(../../nav-bg-right.gif) no-repeat 100% -24px;
padding: 4px 12px 4px 12px;
cursor: pointer;
}
.main-nav2 ul.AspNet-Menu li a:hover,
.main-nav2 ul.AspNet-Menu li a.active {
background-position: 0 0;
color: #1b8db3;
}
.main-nav2 ul.AspNet-Menu li a:hover span,
.main-nav2 ul.AspNet-Menu li a.active span {
background-position: 100% 0;
}
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a,
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a
{
background-position: 0 0;
color: #1b8db3;
}
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a span,
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a span
{
background-position: 100% 0;
}
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul
{
visibility: visible;
}
.main-nav2 ul.AspNet-Menu ul{
width:500px;
}
.main-nav2 ul.AspNet-Menu ul li {
font: 12px/20px Arial, sans-serif;
padding: 0 5px 0 0;
display: inline;
}
.main-nav2 ul.AspNet-Menu ul li a {
text-decoration: none;
color: #1b8db3;
padding: 0 0 0 12px;
background-image:none;
}
.main-nav2 ul.AspNet-Menu ul li a:hover {
text-decoration: underline;
}
HTML：
<div class="main-nav2" id="ctl00_MainMenu">
<div class="AspNet-Menu-Horizontal">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-Item">
<a href="javascript:return false;#1">
<span> A Menu Option</span></a>
<ul>
<li class="AspNet-Menu-Item">
<a href="/CSSMenu/A1.aspx">
A1 SubMenu Option</a>
</li>
<li class="AspNet-Menu-Item">
<a href="/CSSMenu/A2.aspx">
A2 SubMenu Option</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-Item">
<a href="javascript:return false;">
<span> B Menu Option</span></a>
<ul>
<li class="AspNet-Menu-Item">
<a href="/CSSMenu/B1.aspx">
B1 SubMenu Option</a>
</li>
<li class="AspNet-Menu-Item">
<a href="/CSSMenu/B2.aspx">
B2 SubMenu Option</a>
</li>
</ul>
</li>
<li class=" AspNet-Menu-Selected">
<a href="/CSSMenu/C.aspx">
<span> C Menu Option</span></a>
</li>
</ul>
</div>
</div>
提前許多感謝任何提示或幫助！
特里
選項二和三這裏是我會用，他們工作很好。 – 2010-03-05 00:19:19
DN，這些建議讓我非常接近，非常感謝！ – tblank 2010-03-05 15:51:12