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上。我已经尝试为所有元素设置索引，但它根本不起作用。

我该怎么做？

P.S。：我知道我ul内的span有一些标记问题。别担心。我会解决的。图形问题目前更重要！感谢

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

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

Answer 4

似乎你只考虑IE7 +。如果你想在img下使用ul，你应该给img一个z-index超过ul的z-index，但请考虑img下的某些ul内容是不可见的。 jsfiddle.net/XLzmc/1/

绝对定位块的Z-Index

4 个答案: