Question

Javascript

$("#col").hover(function (){
   $("#cool").toggle();
});

<div>
<ul id="col">
<li>Sports</li>
<ul id="cool" style="padding-left:0px;display:none">
<li>Tennis</li>
<li>Basketball</li>
</ul>
</ul>
</div>
<div style="position:fixed;z-index:-1">
<strong>Wanna be?</strong>
</div>

我正在尝试创建一个drowdown菜单列表。它正如我预期的那样正常工作，除了一个案例。当我将鼠标悬停在体育词上时，网球和篮球似乎出现但是这个词想成为什么？被推下来但我希望这个位置得到修复。我使用位置固定和z-index作为-1，我不知道他们是否使用这些方式，但我发现他们在谷歌

但仍然是“想做什么？”正在降低悬停效果，但我想要它被修复，当悬停生效时它应该在网球和篮球菜单后面。

请帮我解决这些问题。任何帮助是极大的赞赏。谢谢

Answer 1

只需将position: absolute;添加到“酷”UL

即可

<div>
<ul id="col">
<li>Sports</li>
<ul id="cool" style="position: absolute;padding-left:0px;display:none">
<li>Tennis</li>
<li>Basketball</li>
</ul>
</ul>
<div style=" z-index:-1">
<strong>Wanna be?</strong>
</div>
</div>

检查此demo

Answer 2

有很多解决方法。

首先，通过使用top和left CSS属性实际指定其位置来修复固定div的位置。

Answer 3

您可能希望将#col列表的位置设置为“绝对”。这样，整个列表不会占用HTML文档中的任何空间，因此在更改时不会移动它们。

修复div标签的位置

3 个答案: