[SOLVED]Menu going vertical instead of horizontal

site: http://amalthia.mediawood.net/ebooks/index.php?skin=bluearchive
username: ebooks
password: forus

Nature of problem: For some reason when my bluearchive skin is set to unordered list, my menu goes from horizontal to vertical. However, in elegance the settings need to be set to unordered list in the block menu configuration or the background dissapears on the menu. I'm trying to get this skin to match what I have at the angst archive. http://amothea.slashcity.com/db/index.php

In 2.0 with this skin I can have the menu set to Links only or unordered list it doesn't seem to affect the menu bar at all. But I'm trying to upgrade this for skin for 3.0 and I'm not sure what I'm missing or what's causing my menu to form a column instead of a row.

this is the .css code for the skin.

/* Skin by Kylie Lee ( http://www.kyliefic.com) */
/* May 2006; created by altering eFiction's 3column template */
/* This skin is designed to be used for an individual author's archive, not an open-submission archive */
/* This skin disables the user login menu choice; authors should log into admin.php */

/* CODES ON EVERY PAGE */

html {
font-family: verdana, arial, helvetica, sans-serif;
background-color: #ffffff;
color: #000000;
font-size: 90%;
margin: 0;
padding: 0;
}

body {
margin: 0;
}

/* Layout and Text Styles in Alphabetical Order. */
/* Alternating Cells */
.even { background-color: #ffffff; border: 2px solid #000080; }
.odd { background-color: #ffffff; border: 2px solid #000080;}

#mainpage {
margin: 1em;
padding: 1em;
border: 2px solid #000080;
background-color: #ffffff;
}

/* the following defines your menu below the banner div */
/* the box around the menu and aligning the text to center */
#menu {
background: #ffffff;
text-align: right;
}
/* links in the menu */
#menu a {
color: #336699;
font-weight: bold;
text-decoration: none;
border-right: 1px solid #336699;
padding-left: 4px;
padding-right: 4px;
}

address {
font-family: verdana, arial, helvetica, sans-serif;
background-color: #ffffff;
color: #336699;
font-size: 80%;
font-style: normal;
margin-top: 2em;
padding: 1em;
    text-align: right;
}

h1 {
color: #336699;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: normal;
font-size: 130%;
}

h2 {
border-bottom: 2px solid #336699;
color: #336699;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: normal;
font-size: 120%;
width: 85%
}

/* HOTLINKS */

a:link {
background-color: #ffffff;
color: #336699;
text-decoration: none;
}

a:visited {
background-color: #ffffff;
color: #336699;
font-style: normal;
text-decoration: none;
}

a:active {
text-decoration: none;
}

a:hover {
background-color: #ffffff;
text-decoration: none;
}

/* the following defines your menu below the banner div */
/* the box around the menu and aligning the text to center */

/* INDEX PAGE */

.block { }

.block p {
margin-left: 2em;
}

.content {
margin-left: 2em;
}

/* In CSS-compliant browsers (Mozilla, Firefox), #categoryblock appears block centered. In IE, it correctly appears indented because I added a clearfix div around it. I can't alter #categoryblock properly so I've altered other div codes around it as a hack. */

#categoryblock  { }
.catblockcell { }

.newsbox {
margin-left: 2em;
}

.newstitle {
font-style: verdana;
font-weight: normal;
margin: 1em 0 .5em 0;
padding: .3em 0;
text-transform: capitalize;
}

#newsarchive {
font-weight: normal;
margin: 1em 0 0 2em;
}

/* CATEGORIES, RECENT PAGES */

#pagetitle /* same as h3 */ {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 100%;
font-weight: normal;
margin: 0 0 1em 0;
}

.label {
font-style: verdana;
font-weight: normal;
}

#alphabet {
font-size: 115%;
margin: 1em 5em;
text-align: center;
}

#sort {
text-align: center;
}

#columnblock {
font-size: 100%;
line-height: 1.5em;
margin-left: 2em;
}

.sectionheader {
border-bottom: 1px solid #336699;
font-style: italic;
font-size: 100%;
font-weight: normal;
margin: 1em 0 .5em 0;
padding: .3em 0;
text-transform: capitalize;
}

.listbox {
margin: .5em 0 0 .5em;
}

.title {
font-size: 100%;
font-weight: normal;
padding: .5em;
}

.classification /* IE6 does not render this correctly if it's altered (say, to italic) */ { }
.adminoptions { }

.tail {
margin-left: 2em;
}

#pagelinks {
font-size: 100%;
margin: 1em 5em;
text-align: center;
}

/* FIC PAGES */

.jumpmenu { }

#notes {
border: 1px solid #336699;
margin: 1em;
padding: 1em;
}

#notes title { }
#notes content { }

#story /* font size hard-coded in each fic automatically to 100% */ { }

/* REVIEW PAGES */
/* Review pages also use #pagetitle, .listbox, .classification, and .adminoptions (defined above) */

.respond {
font-weight: normal;
margin: 1em 0;
}

/* ADMIN PAGES */

table { }
.tblborder { }

/* PRECONFIGURED BY eFICTION */

LABEL { }

.cleaner, .output {
clear: both;
height: 1px;
font-size: 1px;
border: none;
margin: 0;
padding; 0;
background: transparent;
}

/* The following fixes the disappearing text bug in IE. */

/* the clearfix class fixes certain problems with display in IE. If you have disappearing backgrounds and/or text in a div adding this class to the PARENT might help */

#output:after, .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

html>body #output:after, html>body .clearfix:after { display: none; }

#output, .clearfix { display: inline; }

/* Hides form IE-Mac */

* html #output, .clearfix { height: 1%; }
#output, .clearfix {display: block; }

/* End hiding */

I'd appreciate any and all help.