Question

我尝试做一个下拉菜单但是在我输入所有代码之后，标签只是侧向移动而没有显示下拉选项卡。所以基本上，它在悬停时响应，但没有创建下拉菜单。有什么想法吗？

这是我的CSS：

.navbar {
float: right;
width: 100%;
height: 50px;
text-align: center;
background-color: #000;
color: #fff;
font-weight: bold;
position: absolute;
top: 50px;
left: 0px;
font: Arial, Helvetica, sans-serif;
}

#nav {
width: 100%;
float: right;
list-style: none;

}

#nav li {
float: right; 
padding-bottom: 10px;
padding-top: 15px;
padding-left: 20px;

}

#nav li a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #FFF;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #fff;
    padding-right: 20px;

}

#nav li a:hover {
    color: #6A5ACD;
    background-color: #000;

}

#nav li ul {
display: none;
background-color: #000;

}

#nav li:hover ul {
display: block;
height: auto;
background-color: #000;

}

#nav li:hover li {
float: none;

}

这是我的HTML：

<div class="navbar">
  <ul id="nav">
<li><a href="contact.html">Contact</a></li>
<li><a href="journey.html"> Journey </a>
    <ul>
        <li><a href="journey-s.html"> Sasha </a></li>
        <li><a href="journey-b.html"> Brian </a></li>
    </ul>
</li>
<li><a href="things.html">Things</a>
    <ul> 
        <li><a href="thatmove.html"> That Move </a></li>
        <li><a href="stillthings.html"> Still Things </a></li>
   </ul></li>
<li><a href="places.html">Places</a></li>
<li><a href="people.html">People</a></li>
<li><a href="about.html">About</a></li>

Answer 1

插入jsfiddle并且工作正常：

link

你也可以改变这个：

border-right-style: solid;
border-right-width: 1px;
border-right-color: #fff;

为：

border: 1px solid #fff;

确保将正确的CSS链接到它。否则，请发布您的演示链接

下拉菜单CSS不起作用

1 个答案: