0

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

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

我需要做什么？

PS：我知道我ul在span. 别担心。我会修复的。图形问题目前更重要！谢谢

4

4 回答 4

0

看看这是否按照您想要的方式工作：

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

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

于 2013-02-24T08:40:13.157 回答
0

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

于 2013-02-24T08:52:41.867 回答
0 
span ul { z-index: 100; }
span:hover img { z-index: 101; }
于 2013-02-24T08:08:10.997 回答
0

使用这个 CSS 文件：

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

总是位移ul来控制li

于 2013-02-24T08:10:10.807 回答