CSS论坛 - Powered by Discuz! Board

标题: 下拉菜单被图片图层盖住了怎么办？求解！谢谢！ [打印本页]

作者: sara_tao 时间: 2011-10-1 14:07 标题: 下拉菜单被图片图层盖住了怎么办？求解！谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0px;padding:0px;}
#conster{
width:1000px;
height:1500px;
margin:0 auto;
}
.romwe{
width:169px;
height:53px;
float:left;
}
.tou{
width:1000px;
float:left;
height:50px;
}
.a{
width:82px;
float:left;
margin-left:5px;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
}
.daohang{
width:413px;
height:auto;
float:right;
margin-top:5px;
}
.a:hover{
color:#666666;
cursor:pointer;
}
.b{
width:100px;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
float: left;
display: inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

height: 20px;
width: 100px;
list-style: none;
text-align:center;
}
ul li a {
color: #FFF;
text-decoration: none;
line-height: 24px;
width: 91px;
margin: 0px;
padding: 0px 0px 0px 8px;
display: block;
border-right: solid 1px #ccc;
border-bottom:solid 1px #ccc;
background: #808080;
}
ul li ul li { height:25px; }
ul li ul li a {
background: #666;
line-height:24px;
}
ul li a:hover { background: #666; }
ul li ul { display:none;z-index:0;}
ul li:hover ul { display:block;
}
ul li ul li a:hover { background: #333; }
#zhuang div a{
text-decoration:none;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
line-height:20px;
font-size:12px;
}
#zhuang div a:hover{
color:#999999;
cursor:pointer;
}
td:hover{
color:#333333;
cursor:pointer;
}
</style>
</head>

<body>

<div style="width:1000px; height:auto; float:left; margin-top:10px;">
<ul>
<li><a href="#">HOME</a></li>
  <li><a href="#">DAILY NEW</a>
  <ul>
   <li><a href="#">2011-09-21</a></li>
   <li><a href="#">2011-09-20</a></li>
   <li><a href="#">2011-09-19</a></li>
   <li><a href="#">2011-09-18</a></li>
   <li><a href="#">2011-09-17</a></li>
   <li><a href="#">2011-09-16</a></li>
</ul>
  </li>
  <li><a href="#">APPAREL</a>
<ul>
   <li><a href="#">SHOP NEW</a></li>
   <li><a href="#">T-shirt</a></li>
   <li><a href="#">Dress</a></li>
   <li><a href="#">Suits</a></li>
   <li><a href="#">Vest/Basic</a></li>
   <li><a href="#">Jeans</a></li>
   <li><a href="#">Pants</a></li>
   <li><a href="#">Shorts</a></li>
   <li><a href="#">Outwear</a></li>
</ul>
  </li>
  <li><a href="#">JEWELRY</a>
<ul>
   <li><a href="#">Necklace</a></li>
   <li><a href="#">Ring</a></li>
   <li><a href="#">Earring</a></li>
   <li><a href="#">Bracelet</a></li>
   <li><a href="#">Brooch</a></li>
</ul
  ></li>
  <li><a href="#">ACCESSORY</a>
<ul>
   <li><a href="#">Tights</a></li>
   <li><a href="#">Leggings</a></li>
   <li><a href="#">Shoes</a></li>
   <li><a href="#">Bags</a></li>
   <li><a href="#">Others</a></li>
</ul>
  </li>
  <li><a href="#">COLLECTIONS</a>
<ul>
   <li><a href="#">Buyer's Pick</a></li>
   <li><a href="#">Latest Street Style</a></li>
   <li><a href="#">Honey Girl</a></li>
   <li><a href="#">Star Stalker</a></li>
   <li><a href="#">Easy Chic</a></li>
   <li><a href="#">Aukoala Boots</a></li>
   <li><a href="#">Soufeel Jewelry</a></li>
</ul>
  </li>
  <ul>
  <li><a href="#">OUTLET</a></li>
  </ul>
  <ul>
  <li><a href="#">BLOGGERS</a></li>
  </ul>
</ul>
</div>
<div style="float:left;margin-top:10px;z-index:-1000;"><a><img src="027_1600.jpg" /></a></div>
</body>
</html>

作者: sara_tao 时间: 2011-10-17 08:42

没人能帮忙吗？

作者: divcss5 时间: 2011-10-17 09:11

对ul li ul li { height:25px; } 加一个position:relative 属性即可！
但在IE6中是不能正常显示下拉菜单的！
建议改用：http://www.divcss5.com/template/m101.html
或
http://www.divcss5.com/template/m224.html
或
http://www.divcss5.com/template/m81.html

作者: sara_tao 时间: 2011-10-17 09:29

谢谢！！！！

作者: seaqi 时间: 2011-10-21 15:34 标题: 回复 1# sara_tao 的帖子

当然在IE6中不兼容啦，IE6不支持普通元素的伪类，

欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/)