Question

这是代码JsFiddle

的链接

问题是当鼠标悬停在“服务和支持”中的<ul>时，它下方的<li>没有下降，

有人可以帮我解决吗????

感谢

Answer 1

css的一些改动：

#menu li {
        height:auto;
        float:none;
        clear:both;
        width:89%;
        min-height:60px;
    height:auto;
        margin-left:5.5%;
        border-bottom:thin solid #f8aa5a;
        padding-bottom:15px;

这包括使用height: auto; 以及使用padding代替margins。

Answer 2

我根据你的jsFiddle创建了一个Fiddle。

我在jquery和css中做了一些改变。

在你的CSS中添加。

#menu li > ul{
  float:left;
  width:100%;
}

并做了一些其他改动。

Answer 3

你的错，因为你把李53px的高度，它应该是最小高度。

#menu li {
    border-bottom: thin solid #f8aa5a;
    clear: both;
    float: none;
    margin-bottom: 12px;
    margin-left: 5.5%;
    min-height: 53px;
    width: 89%;
}

#menu ul{
.
.
.
.
top:2px; //instead of 5..
}

Answer 4

我在你的jsFiddle中添加了一些代码。

http://jsfiddle.net/wayzz/vrf4jxpy/2/

使用animate()我添加了margin-bottom，因此整个li看起来像是动画效果。

您可以在我添加或更改代码的位置找到评论。：）

你能帮我解决这个漂浮的子菜单吗？

4 个答案: