下拉菜单 CSS 不起作用答案

【问题标题】：Drop down menu CSS not working下拉菜单 CSS 不起作用
【发布时间】：2014-06-15 02:08:52
【问题描述】：

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

这是我的 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>

【问题讨论】：

jsfiddle.net/9qN3P 在这里工作正常
这很奇怪，但是谢谢 :)
您是否希望它像这样在悬停时将父导航项移到上方？

标签： html css

【解决方案1】：

插入 jsfiddle 并且工作正常：

link

你也可以改变这个：

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

到：

border: 1px solid #fff;

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

【讨论】：

谢谢。我认为它可能是阻止下拉菜单的其他 div 之一。