I have this inline code and some CSS code for a navigation menu (see attached image. In order to move the link names to the right, I had to add many blank boxes on the left. And I had to have some text in those boxes to keeo the height, so I put an l in each one. Can you help me remove the l's, or help me put one long blank box to the left of the nav menu names, please?

inline page code:

<div id="menuh-container"><div id="menuh"><ul><li><a href="./index.htm">l</a></ul><ul><li><a href="./index.htm">l</a></ul><ul><li><a href="./index.htm">l</a></ul><ul><li><a href="./index.htm">l</a></ul><ul><li><a href="./index.htm">l</a></ul><ul>                        <li><a href="./index.htm">l</a></ul><ul><li><a href="./index.htm">l</a></ul><ul><li><a href="./index.htm">home</a></ul><ul><li><a href="./faq.htm">faq</a>CSS code:</ul><ul><li><a href="./register.htm">register</a></ul><ul><li><a href="[var.login_out_link]">[var.login_out]</a></ul><ul><li><a href="./upload.htm">upload</a></ul><ul><li><a href="page.php?page=9">search</a></ul></div></div>

CSS Code:

#menuh-container
	{
	/*position: absolute;*/
	position: float;
	top: 7em;     /* verical position (see canner group) */
	left: 9em;   /* horizontal position (see canner group) */
	}

#menuh
	{
	font-size: 12px;
	font-family: arial, helvetica, sans-serif;
	width:100%;
	float:right;
	margin:0em;
	margin-top: .5em;
	}
		
#menuh a
	{
	text-align: left;
	display:block;
	border: 1px solid rgb(128, 0, 0);
	white-space:nowrap;
	margin:0;
	padding: 0.3em;
	}
	
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
	{
	color: white;
	background-color: rgb(128, 0, 0);
	text-decoration:none;
	}
	
#menuh a:hover	/* menu at mouse-over  */
	{
	color:white;
	background-color: #b22323;
	text-decoration:none;
	}	
	
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	background-image: url(images/navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}
	
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-image: url(images/nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}

#menuh ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:6.2em;	/* width of all menu boxes was - 9 */
	}

#menuh li
	{
	position:relative;
    min-height: 1px; 			
    vertical-align: bottom;
	}

#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}

#menuh ul ul ul
	{
	top:0;
	left:100%;
	}

div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

Your menu should just be a list styled inline.

<div id="nav">
<ul class="nav-top">
    <li><a href="/link1.php" title="link1">link1</a></li>
    <li><a href="/link2.php" title="link2">link2</a></li>
    <li><a href="/link3.php" title="link3">link3</a></li>
</ul>
</div>

CSS

div#nav {
height:35px;
width:100%;
}
ul.nav-top {
float:right;
list-style:none;
}
.nav-top li {
dislplay:inline;
padding: 3px 5px;
}
.nav-top li a {

}

That is the start of a horizontal menu. Check out this site for great examples to study and finish the code.
http://www.cssplay.co.uk/menus/pro_horizontal.html

So, put a height on the <li> and adding top and bottom padding on the <a> tag to keep the height.