Question

我试图制作一个下拉菜单，我无法编辑我的HTML，我必须在css中完全设置它。我正在使用css3

我已经将它设置为风格，我只需要它实际下降。

分享'li'将是页面顶部唯一显示的内容，当您将鼠标悬停在此页面上时，剩余的列表项将会下拉。因此，李分享现在将处于下拉的底部。因此，一旦你将鼠标悬停在分享上，它就会从顶部开始 - Twitter，facebook，google，linkedin和share。

下载我的html下拉列表：

<ul id = "dropdown">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Linkedin</li>
<li>Share</li>
</ul>

到目前为止，这就是我在我的CSS中所拥有的

#dropdown ul {
float: left;
}



#dropdown li {
background: white;
padding: 10px;
width: 120px;
list-style-type: none;
font-family: arial;
font-size: 20px;
text-align: center;
}


#dropdown :nth-child(1) {
background-color: gray;
color: white;
border: 6px solid white;
}

#dropdown :nth-child(2) {
border: 6px solid white;
}

#dropdown :nth-child(3) {
background-color: gray;
color: white;
border: 6px solid white;
}

#dropdown :nth-child(4) {
border: 6px solid white;
}

#dropdown :nth-child(5) {border: 6px solid white;
border-top: 1px solid black;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
font-weight: bold;}

如果有人能帮我解决如何设计这种方式来降低我需要它的方式它会很棒，感谢

Answer 1

当您将鼠标悬停在LI元素上时，您也将鼠标悬停在它的容器上，在本例中为ul＃dropdown元素，因此将以下内容添加到样式的末尾应该可以正常工作：

#dropdown li {
    display: none;
}
#dropdown li:last-child {
    display: block;
}
#dropdown:hover li {
    display: block;
}

Answer 2

您需要添加一些代码。我已经为你添加了一些代码。 DEMO这里

如何在不编辑我的HTML的情况下制作下拉菜单

2 个答案: