HTML:在仅使用 HTML 和 CSS 的内联列表中创建下拉列表

Question

我正在尝试创建一个水平(内联)列表，并且在其中一些列表上我需要有一个仅在悬停时出现的下拉列表。现在一切似乎都正常，但我的问题是下拉列表没有显示为单独的列表，而是显示为列表其余部分的一部分。除非没有其他解决方案，否则我不想使用 JavaScript。

我的代码:

.horizontalList ul {
list-style-type:none;
text-align: center;
margin:0;
padding:0;
}
.horizontalList ul li {
display: inline;
position: relative;


}
.horizontalList ul li li a{
white-space:nowrap;
background-color: #300;
top:1.4em;
}
.horizontalList ul li a {
text-decoration:none;
padding: .2em 1em;
color: #fff;
background-color: #036;

}
.horizontalList ul li a:hover {
color: #fff;
background-color: #369;
}
.horizontalList ul ul {
position: absolute;
top: 1.4em;
left: 0;
display: none;

}
.horizontalList ul > li:hover ul {
display: block;
}

<div class="horizontalList">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Laptops</a>
      <ul>
        <li><a href="#"> Repairs and Servicing</a></li>
        <li><a href="#">Sales</a></li>
      </ul>
    </li>
    <li><a href="#">milks</a></li>
  </ul>
</div>

Answer 1

这与您的外观相似，只是使用了我刚才放在一起的东西作为模板。

fiddle

html

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>

    <li>
        <a href="#">Chickens</a>
        <ul>
            <li><a href="#">eggs</a></li>

            <li><a href="#">meat</a></li>
        </ul>
    </li>
<li><a href="#">milks</a></li>

CSS

#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:left; 
    width:100%;

}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}


#nav ul{
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
}
#nav ul li{
    padding-top:1px; 
    float:none;
}
#nav ul a{
    white-space:nowrap; 
}
#nav li:hover ul{ 
    left:0; 
}
#nav li:hover a{ 
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ 
    text-decoration:none;
}
#nav li:hover ul li a:hover{ 
    background:#333;
}

现在只需在需要的地方设置样式