绝对定位块的Z索引

Question

我通过这种方式创建了一个所谓的“下拉列表”：

HTML：

<span><img src="images/searchall.png" alt=""/>
  <ul>
    <li>WORKSPACES</li>
    <li>REPORTS</li>
    <li>PEOPLE</li>
    <li>COMMENTS</li>
    <li>ANNOTATIONS</li>
  </ul>
</span>

CSS：

span {position:relative;}
span ul {position:absolute; display:none;}
span:hover > ul {display:block;}

我的问题是，UL应该出现在span:hover下img内部元素span 。 我试过为所有元素设置索引，但是根本行不通。

我需要做什么？

PS：我知道我在span内的ul存在一些加价问题。 别担心。 我会解决。 目前，图形问题更为重要！ 谢谢

Answer 1

span ul { z-index: 100; }
span:hover img { z-index: 101; }

Answer 2

使用此CSS文件：

span {position:relative;}
span ul {position:absolute; min-height:20px;}
span ul li {display:none;}
ul:hover > li {display:block;} 

始终取代ul以控制li

Answer 3

看看这是您想要的方式吗：

span {float:left; width:200px;}
span img{float:left; width:200px;}
span ul {float:left; display:none;}
span:hover > ul {display:block;}

您应该浮动所有block元素并定义它们的大小，以便该框可以垂直分配。

Answer 4

看来您只考虑IE7 +。 如果要在img下使用ul，则应给img一个大于ul的z-index的z-index，但是请考虑img下ul的某些内容不可见。 jsfiddle.net/XLzmc/1/