Question

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

我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

现在只需在必要时设置样式

Answer 2

这可以通过进行以下更改来实现：

将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小提琴： http://jsfiddle.net/s9z8rzt8/

HTML：在仅包含HTML和CSS的内联列表中创建下拉列表

2 个答案: