Try this:

The HTML:

<ul id="navlist">
<li><a href="javascript: document.cookie='style='; window.location.reload();">Frames</a>
<a href="http://studentorg.ecpi.edu/oswm">By OSWM</a></li>

<li><a href="javascript: document.cookie='style=2'; window.location.reload();">DOS</a>
<a href="http://www.richardorobinson.com">By Richard O Robinson</a></li>

<li><a href="javascript: document.cookie='style=3'; window.location.reload();">Gears Of War</a>
<a href="http://www.richardorobinson.com">By Richard O Robinson</a></li>

<li><a href="javascript: document.cookie='style=4'; window.location.reload();">The Greener Side</a>
<a href="#">By Shane Jeffers</a></li>

<li><a href="javascript: document.cookie='style=5'; window.location.reload();">Moment of Zen</a>
<a href="http://studentweb.ecpi.edu/beachva/mathow7777">By One|Te Productions</a></li>

<li><a href="download/The_Garden.zip">Add To The Garden</a>
<a href="#"></a></li>
</ul>

The only thing I did to the above code is remove the <br /> tags.  Don't need if you set the <a> to display block because you are defining an <a> for each line you want.

The CSS:

#navlist {
    list-style: none;
}
#navlist li {
    display: inline;
    float: left;
}
#navlist li a {
    color: green;
    display: block;
    padding: 3px 15px;
        margin: 0;
}
#navlist li a:hover {
    text-decoration: none;
}

Two important elements here is that I added float: left to the #navlist li and display: block to #navlist a.  Of course I've added a bit of padding/margins to give it a nice look.