How to make this in html and css?

Question

I am trying to make this from a design someone gave me:

Now, I do have this:

But how am I able to add those lines on full height between the options?

<ul id="navigation">
    <li><a href="#">Log In</a></li>
    <li><a href="#">VIP Membership</a></li>
    <li><a href="#">Best Players</a></li>
    <li><a href="#">Administrators</a></li>
    <li><a href="#">Forums</a></li>
</ul>

#navigation { 
    float: right;
    padding-top: 8px;
    font-size: 18px;
    font-family: Arial;
}

#navigation li { 
    padding: 2px;
    margin: 0;
    float: left;
    list-style: none;
}

Answer 1

Your question is lines on full height between the options - Answer is border-left: 1px solid #666666

Fiddle

#navigation
{
    width: 100%;
    list-style-type: none;
    background: #000000;
    text-align: center;
}
#navigation li
{
    display: inline-block;
    height: 70px;
    line-height: 70px;
    border-left: 1px solid #666666;
}
#navigation li:last-child
{
     border-right: 1px solid #666666;
}
#navigation li a
{
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 15px 10px 15px;
    font-family: arial;
}
#navigation li a:hover
{
    color: red;
}