Html 下拉菜单CSS不工作

我试着做一个下拉菜单，但在我输入了所有代码后，标签只会横向移动，不会显示下拉标签。所以基本上，它是在悬停状态下响应，而不是创建下拉菜单。有什么想法吗

以下是我的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>

---

插入JSFIDLE，效果良好：

您还可以更改此设置：

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

致：

---

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

效果很好，这很奇怪，但谢谢：）您希望它像那样将父导航项目移动到悬停位置吗？谢谢。我想这可能是阻止下降的另一个部门。

border: 1px solid #fff;