Display:block nav alignment

I have tried using display:block; and display:inline; to get my nav to align but it does not seem to be budging. What simple thing have I missed?

<nav id="head-nav">
            <ul>
                <li class="first current">
        <a href="http://commercial.co.nz/index.php/home">Home</a>
    </li>
    <li class="last">
        <a href="http://commercial..co.nz/index.php/contact">Contact&开发者_运维问答lt;/a>
    </li>

            </ul>
        </nav>

#head-nav{
    display:block;
    float:right;
    width:710px;
    border:1px solid red;
    margin:45px 0 0 0;
}
#head-nav ul li a{
    display:block;
    height:25px;
    width:60px;
    background-color:cyan;
}

To align them in the same row you need to add float:left; to the css for li

#head-nav ul li{
    float:left;
}

Plus this may not render properly in some older or non-html5 browsers. You should add conditional statements or use <div> tags instead.