Need some assistance with a CSS menu

I'm still pretty much a beginner with CSS, but, if you make a new page with just the menu does it work properly? If so, then theres something in the different CSS files that are overriding one another.

 

If you use Firefox, download the Firebug extension. Then you can right-click and "Inspect Element". That will give you a list of what CSS rules are affecting your menu.

 

I'm not an expert, or even that knowledgeable with CSS, but I tweaked it a bit, I can't say that this is the best thing to do, or even the right thing to do, but try this for your main2.css, it fixes the menu problem, but might create other problems, I don't know:

Code:

/**
 * 100% height layout with header and footer
 * ----------------------------------------------
 * Feel free to copy/use/change/improve
 */
html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	background:gray;
	
	font-family:arial,sans-serif;
	font-size:small;
	color:#666;
}

h1 { 
	font:1.5em georgia,serif; 
	margin:0.5em 0;
}
h2 {
	font:1.25em georgia,serif; 
	margin:0 0 0.5em;
}


h1, h2, a {
		color:orange;
	}
p { 
	line-height:1.5; 
	margin:0 0 1em;
}
div#container {
	margin:0 auto; /* center, not in IE5 */
	width:875px; background:#f0f0f0; height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; -moz-border-radius: 15px; -webkit-border-radius: 15px; /* real browsers */
}
/*Layout
*/
div#header { background-image: url(../media/kc_auctions-banner.png); background-repeat: no-repeat; background-attachment: scroll; background-position: 98% 0; height: 162px; padding:0.5em 0.5em 0; }
div#header p {
		font-style:italic;
		font-size:1.1em;
		margin:0;
	}
div#content { margin-top: 10px;
	 /* bottom padding for footer */
}
div#content p {
		text-align:justify;
	}
div#footer {
	width:100%;
	bottom:0; /* stick to bottom */
	background:#ddd;
	border-top:6px double gray;
}
div#footer p {
		padding:1em;
		margin:0;
	}
/* Rounded Corners */
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;}
#xsnazzy h1 {font-size:2.5em; color:#000;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:25px 1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ffc; border-left:1px solid #000; border-right:1px solid #000;}
.xb1 {margin:0 5px; background:#000;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent { display:block; background:#ffc; border-color: #000; border-style: solid; border-width:0 1px; }

 

It sets the left position in the JavaScript. It seems to be a bug of sorts. If you narrow your browser window to the width of the page you'll see the sub-menus line up correctly. Contact the developer so they know about this problem and they might be able to fix it. You may be better off looking at other menu options. Most do navigation as nested lists rather than having the sub-menus as different elements on the page.

 

Use this menu template instead: http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129

You don't need JavaScript to accomplish that task.