Question

我正在尝试创建一个下拉菜单。一切都有效，除了下拉列表中的列表项。就像你在jsFiddle上可以看到的那样，下拉列表中的列表项目（在联系人悬停时）菜单显示在彼此旁边，而不是彼此之上我想要的。

我试过了：

/*drop-up menu*/

#footer ul li ul.dropup{
  display:none;
}
.dropup li{
  display:block;
}
#footer ul li:hover .dropup{
  display:block;
  position:absolute;
  bottom:40px;
  border:1px solid #111111;
  background:rgba(0,0,0,0.4);
  border-radius: 7px 7px 0px 0px;
}

我也尝试过观看教程，但这没有帮助。当我使用<ul>时，我通常没有这个问题，所以我不明白是否会导致这个问题。我希望有人可以帮助我。

Answer 1

http://jsfiddle.net/f671z43v/3/ 你只需要通过添加V形符号使浮动更加具体。

#footer > ul > li{
    display:inline-block;
    float:left;
}

只选择直接的孩子，下拉菜单不会应用浮动。

Answer 2

在你的CSS中

在dropup li中添加clear:both

.dropup li{
    display:block;
    clear:both;
    width:100%;
}

Answer 3

看起来你只是绊倒了一点选择器特异性。

变化：

/*drop-up menu*/
#footer ul li ul.dropup{
    display:none;
}
.dropup li{
    display:block;
}

要：

/*drop-up menu*/
#footer ul li ul.dropup{
    display:none;
}
#footer .dropup li{ /* more specific selector... */
    display:block;
    float: none;
}

Working Example

Answer 4

你必须做这个补充：

#footer ul li ul.dropup li {
    display: block;
    float: none;
}

小提琴：http://jsfiddle.net/f671z43v/8/

如何获取列表项显示的块？

4 个答案: