[RESOLVED] Help with Nav System

[mramonster]

I'm working on a fairly small website but am having trouble with the nav system.
I want it to look like this:

Link 1 Link 2 Linke 3 Link 4 Link 5 Link 6 Link 7

and when you hover over Link 1 you get:

Link 1 Link 2 Linke 3 Link 4 Link 5 Link 6 Link 7
Link 1a Link1b Link1c

Link 2

Link 1 Link 2 Linke 3 Link 4 Link 5 Link 6 Link 7
Link 2a Link2b Link 2c Link 2d

and so on. However I keep getting stuff like this

Link 1 Link 2 Linke 3 Link 4 Link 5 Link 6 Link 7
Link 1a Link1b____________________________
Link 1c__________________________________

---------------------------Here's my Coding----------------------------------------
menu.css

/***Horizontal Menu***/
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: center;
}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: inline;
padding-top:4px;
padding-left:30px;
text-decoration: none;
color: #000000;
font: bold 13px Tahoma;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
position: absolute;
display: inline;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}

/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 500px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
}

.horizontalcssmenu ul li a:hover{
}

.horizontalcssmenu ul li ul li a:hover{
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
}

* html p#iepara{
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li {
 float: center;
 height: 1%;
 }
* html .horizontalcssmenu ul li a {
 height: 1%;
 }
/* End */


/***Vertical Menu***/
.verticalcssmenu {
text-decoration: none;
color: #000000;
font: bold 13px Tahoma;
}

.verticalcssmenu a:link{
color: #000000;
}

.verticalcssmenu a:visited{
color: #000000;
}

.verticalcssmenu a:active{
color: #000000;
}

.verticalcssmenu a:hover{
color: #ffffff;
}

menu.js

var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.

function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
  var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
    	var spanref=document.createElement("span")
			spanref.className="arrowdiv"
			spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
			ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    	ultags[t].parentNode.onmouseover=function(){
					this.style.zIndex=100
    	this.getElementsByTagName("ul")[0].style.visibility="visible"
					this.getElementsByTagName("ul")[0].style.zIndex=0
    	}
    	ultags[t].parentNode.onmouseout=function(){
					this.style.zIndex=0
					this.getElementsByTagName("ul")[0].style.visibility="hidden"
					this.getElementsByTagName("ul")[0].style.zIndex=100
    	}
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)

barnav.php

<div id="NavBar">

	<center><div class="horizontalcssmenu">
		<ul id="cssmenu1">
		<li><a href="/" title="The The Guy">The Guy</a>
			<ul>
			<li><a href="/who-is.php" title="Who is the The Guy?">Who Is?</a></li>
			<li><a href="/" title="Frequently Asked Questions">FAQ</a></li>
			<li><a href="/" title="Contact the The Guy">Contact</a></li>
			</li>
			</ul>
		</li>
		<li><a href="/" title="The Guy on the Streets">Appearances</a>
			<ul>
			<li><a href="/" title="Upcoming Appearances by the The Guy">Upcoming</a></li>
			<li><a href="/" title="Past Appearances">Past</a></li>
			</li>
			</ul>
		</li>
		<li><a href="/" title="The Guy on the Streets">On T.V.</a>
			<ul>
			<li><a href="/" title="Upcoming Appearances by the The Guy">News 9</a></li>
			<li><a href="/" title="Past Appearances">Stuff</a></li>
			</li>
			</ul>
		</li>
		<li><a href="/" title="The Guy on the Streets">Photos</a>
			<ul>
			<li><a href="/" title="Upcoming Appearances by the The Guy">Celebrities</a></li>
			<li><a href="/" title="Past Appearances">Events</a></li>
			</li>
			</ul>
		</li>
		<li><a href="/" title="The Guy on the Streets">Publications</a>
			<ul>
			<li><a href="/" title="Upcoming Appearances by the The Guy">Newspapers</a></li>
			<li><a href="/" title="Past Appearances">Magazines</a></li>
			</li>
			</ul>
		</li>
		</ul>
	</div><!--Close horizontalcssmenu--></center>

</div><!--Close IndexBar-->

[ednark]

There is no such thing as "float:center;" there is "text-align:center" of the parent element if you are looking to center things.

basically you need to force a width on the "ul ul" elements or they well contract and force a vertical list. Here is your code with some colored borders added to show you whats going on.

<style type="text/css">
ul {border:solid 1px green}
li {border:solid 1px blue}
a  {border:solid 1px red}

/***Horizontal Menu***/
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative; 
display: inline;
/*** float: center; ***/
}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
/*** display: inline; ***/
padding-top:4px;
padding-left:30px;
text-decoration: none;
color: #000000;
font: bold 13px Tahoma;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0px;
top: 0px;
position: absolute;
/*** display: inline; ***/
width: 500px;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
/*** display: inline; ***/
/*** float: none; ***/
float: left;
}

/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
/*** width: 500px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
}

.horizontalcssmenu ul li a:hover{
}

.horizontalcssmenu ul li ul li a:hover{
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
}

* html p#iepara{
padding-top: 1em;
}

[mramonster]

Thanks for your help. 🙂 This is what I ended up with.

/***Horizontal Menu***/
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: inline;
padding-left:20px;
text-decoration: none;
color: #1E1E1E;
font: bold 24px serif;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
width:200px;
left: 0;
margin:8px 0px 20px 0px;
border: 0px solid #00518F;
position: absolute;
display: inline;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}

/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 200px; /*width of sub menu levels*/
padding: 25px 5px 10px 0px;
font: normal 14px serif;
color: #E0E0E0;
z-index: 100;
}

.horizontalcssmenu ul li a:hover{
}

.horizontalcssmenu ul li ul li a:hover{
color: #ffffff;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
}

* html p#iepara{
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li {
 float: left;
 height: 1%;
 }
* html .horizontalcssmenu ul li a {
 height: 1%;
 }
/* End */


/***Vertical Menu***/
.verticalcssmenu {
text-decoration: none;
color: #000000;
font: bold 13px serif;
}

.verticalcssmenu a:link{
color: #000000;
}

.verticalcssmenu a:visited{
color: #000000;
}

.verticalcssmenu a:active{
color: #000000;
}

.verticalcssmenu a:hover{
color: #ffffff;
}