我一直致力于使用纯CSS启动和运行菜单。除了IE6之外,我已经在所有浏览器中工作了。这是我的CSS。
/**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**
NAVIGATION MENUS
~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**/
#topNavigation
{
width: 750px;
background-color: #EC2327;
float: left;
position: absolute;
z-index: 10;
}
#footerBar
{
float: left;
width: 750px;
background-color: #EC2327;
}
#topNavigation ul, #footerBar ul
{
list-style: none;
margin: 0;
padding: 0;
width: 6em;
float: left;
}
#topNavigation a, #topNavigation h2, #footerBar a
{
font-family: Verdana;
font-size: 12px;
font-weight: normal;
color: White;
text-align: center;
display: block;
margin: 0;
padding: 2px 3px;
text-decoration: none;
}
#topNavigation h2
{
}
#topNavigation a
{
color: White;
background-color: #EC2327;
}
#topNavigation a:hover
{
color: #EC2327;
background-color: White;
}
#topNavigation ul ul
{
display: none;
position: absolute;
width: auto;
z-index: 500;
}
#topNavigation ul li:hover ul
{
display: block;
}
这是一些使用此CSS的HTML。
<div id="topNavigation">
<ul>
<li><h2><a href="#">About Us</a></h2>
<ul>
<li><a href="#">Company Profile</a></li>
<li><a href="partners.aspx">Partner's Page</a></li>
<li><a href="testimonials.aspx">Testimonials</a></li>
<li><a href="#">Environmental</a></li>
</ul>
</li>
</ul>
</div>
问题是菜单不会在IE6中击落。虽然我可以让顶级
谢谢, 麦克
答案 0 :(得分:1)
以下似乎不在IE6中实现
#topNavigation ul li:hover ul
{
display: block;
}
你能给级别2 UL / LI一个css类赋值,然后为它创建一个选择器吗?
答案 1 :(得分:1)
不幸的是,IE6仅在:hover
元素上支持a
伪类。
检查this article以获取有关如何编写问题脚本的一些建议。