Drop down menu CSS not working

Question

I tried to do a drop down menu but after I put in all the code, the tabs only move sideways and doesn't show the drop down tabs. so basically, it's responding on hover but not creating a drop-down menu. Any ideas?

Here's my 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;

}

And here is my 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

Inserted into the jsfiddle and it worked fine:

link

Also you can change this:

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

to:

border: 1px solid #fff;

Make sure the correct CSS is linked to it. Otherwise, please post your demo link