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

这可以通过以下修改来实现：

• 将position: relative;添加到.horizontalList ul li。这将确保子菜单相对于包含的li定位。
• 将position: absolute;添加到.horizontalList ul ul。这将使其脱离正常流，并将其定位到top和left值。

CSS:

.horizontalList ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.horizontalList ul li {
    display: inline;
    position: relative;
}
.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;
}

JS Fiddle: http://jsfiddle.net/s9z8rzt8/

Answer 2

这是类似的外观，你有，只是使用一些我刚才放在一起作为模板。

小提琴

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;
}

现在，只要必要的话，就把它风格化