我正在尝试制作CSS下拉菜单(不涉及JavaScript).根据
http://pixelspread.com/blog/289/css-drop-down-menu我只需要添加
http://pixelspread.com/blog/289/css-drop-down-menu我只需要添加
#menuBar #test2 a:hover .subMenu{display:block;}
使子菜单显示.但是,在我的代码中,它不起作用.有人可以帮我解决这个问题吗？非常感谢！
我的HTML
<ul id="menuBar">
<li id="test1">test1</li>
<li id="test2"><a href="#">Pro1</a>
<div class="subMenu">
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
<ul>
<li><a href="#">Volleyball</a></li>
<li><a href="#">Walking</a></li>
<li><a href="#">Water Shoes</a></li>
</ul>
</div> <!--end of submenu-->
</li>
</ul>
我的Css
#menuBar #test2 a{
background:url("../images/btTest.jpg") no-repeat bottom;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}
#menuBar #test2 a:hover{
background:url("../images/btTest.jpg") no-repeat top;
}
#menuBar #test2 a:hover .subMenu{
// I add .subMenu after a:hover and have two a:hover for #test2 a
// I know it won't work but not sure what to do now.
//thanks for the help.
display:block;
}
.subMenu{ // the hidden menu
position:absolute;
top:35px;
left:0px;
z-index: 99999;
width:550px;
background-color:black;
display:none;
}
解决方法
您的HTML结构未设置为允许使用单个css语句的多个子菜单.如果你看一下Mcinerney的HTML：
<div id="menu">
<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>
</div>
和他的CSS：
#menu ul:hover .item{display:block;}
它转换为“如果你将鼠标悬停在一个带有id,”menu“的元素的后代”ul“上,然后使用类”item“找到所有”ul“后代的元素,并将它们的显示设置为“块”.
你可以做类似的事情,但你需要根据LI元素的id为每个子菜单添加一行css：
#test2:hover div.subMenu { display: block; }
“#test2”指的是id为“test2”的任何元素.
“div.subMenu”指的是类名称为“subMenu”的任何元素(在本例中为div).因为它出现在“#test2”之后,div元素必须是“#test2”的后代.
为了使您的背景图像保持悬停状态,您需要对css和html进行一些更改.首先,在“A”上指定一个类(因为我们不想引用作为#test2的子项的所有“A”元素,只是指定的一个)：
<li id="test2"><a href="#" class="top">Pro1</a> ...
然后修改你的css,以便在悬停在#test2上时设置背景(不是#test2 a)：
#test2:hover a.top {
background:url("../images/btTest.jpg") no-repeat top;
}
