Question

我想为自己制作一个小网站，所以我把这个问题作为初学者。当悬停主菜单时，我无法使子菜单包含另一个背景。

HTML：

        <div id="nav">
            <ul class="sub1">
              <li><a href="#"><h2>Home</h2></a></li>
              <li><a href="#"><h2>About</h2></a><!---id="onlink"--->
                <ul class="sub2">
                  <li><a href="#" title="About Us">Us</a></li>
                  <li><a href="#" title="About Our product">Our product</a></li>
                </ul>
              </li>
            </ul>
        </div>

CSS：

#nav{
width:100%;
height: 60px;
padding-top: 20px;
padding-bottom: 10px;
}

#nav ul{
margin:0;
padding:0;
width: 60%;
margin: auto;

}

#nav ul li{
margin:0;
padding:0;
list-style: none;
float:left;
position:relative;
background:transparent url(EN/Button_menu_unselected.png);
}

#nav ul li ul li{
background:aqua; /*Test that doesn't work*/
}

#nav ul li a{
text-align:center;
text-decoration:none;
height:20px;
width:100px;
padding:10px;
display:block;
color:#003300;
}

#nav ul ul{
position:absolute;
visibility:hidden;
}

#nav ul li:hover ul{
visibility:visible;
}

#nav ul li:hover a{
background-image: url(EN/Button_menu_rollover.png);
}

下拉项目的格式与名为＆＃34; Button_menu_rollover＆＃34;的按钮相同，这给我带来了非常糟糕的结果。

Answer 1

代码：

#nav ul li:hover a{
background-image: url(EN/Button_menu_rollover.png);
}

适用于所有元素和子元素。

这修复了它，但此代码在IE6上不起作用：

#nav ul li:hover > a{
background: #fff;
}

或者您可以使用Javascript for HOVER效果来获得准确的结果。

悬停的CSS子菜单背景

1 个答案: