2012-01-30 109 views
0

我想为自己制作一个小型网站,所以我会以初学者的身份提出这个问题。在悬停主菜单时,我无法成功让子菜单包含另一个背景。悬停的CSS子菜单背景

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); 
} 

下拉项目得到相同的格式,被称为 “Button_menu_rollover” 按钮,这给了我一个非常坏的结果。

+0

先尝试'background:red;'。我不认为水色是一种有效的CSS颜色 – Mike 2012-01-30 00:27:27

+0

它是,我以前使用它,它会自动出现(我正在使用Coda)。 – Trace 2012-01-30 00:35:31

+0

工程...对不起, – Mike 2012-01-30 00:37:17

回答

1

的代码:

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

被施加到所有的元素和子元素。

这修复它,但是这个代码不会对IE6的工作:

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

或者你可以使用JavaScript悬停效果得到确切的结果。

+0

哦,这就是小箭头所在的位置:-)对于Internet Explorer 6,现在非常感谢并且太糟糕了!我打算稍后改进我的设计,所以我会再看看它! – Trace 2012-01-30 17:04:53