Help with CSS

Hi,
how would you get a CSS drop down horizontal menu to fully drop down and not be cut off using this template in the code below.
z-indexing is not working for me.

ANY CSS menu I use gets cut off or hovers wrong in firefox and hovers weird in IE. ideas?

http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

Code (markup):

 

still a big fat zero in replies...I guess, it must be a tough question then..

 

I don't think it's an issue on what template you use it on, you would be better posting the code for your menu, as this is obviously where it is going wrong.
In addition to posting the code for the menu, it would be helpful if we could visually see the error on your page or a test server maybe but sometimes it's possibly to identify the error from just the menu code if it's something obvious.

 

I've tried many of best well known css horizontal drop down menus from stu nichols to dynamic drive.

They all get cut off due to the template or something I did not add to the css menu. They DO work on ALL other designs w/o a problem.

as an example; let use this code:

/* -------  TOP NAVIGAIT MENU  ---------------------- */

#topnav {
	display:block;
/*	white-space:nowrap;  */
	background-color:#33600;
/*	text-align:right; */
	margin:0;
	padding:3px;
	border-bottom:3px #E0E0D1 solid;
}
ul#topnavlist
{
	margin:0;
	list-style-type:none;
}
#topnavlist li
{
	display: inline;

}


#topnavlist a
{
	background: transparent url(../images/topmenu.gif) left center no-repeat;
	font-family: arial, helvetica, sans-serif;
	font-size: 9pt;
	color: #ffffff;
	padding-right:10px;
	padding-left:12px;
	display: inline;
}
#topnavlist a:link, #topnavlist a:visited
{
	text-decoration: none;
}
#topnavlist a:hover
{
	text-decoration: none;
	background: transparent url(../images/topmenu.gif) left center no-repeat;
}


img#flag{
	padding:0px 5px 0px 0px;	
	
}




/* -------  DROP-DOWN TOP MENU  ---------------------- */

#nav {
z-index:1;
line-height:1em;
}

#nav, #nav ul {
	float: right; 
	list-style: none;
	background: #336600;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

#nav a {
	display: block;
	color: #FFFFFF;
	padding: 0.25em 1em 0.25em 0;
	text-decoration: underline;
	margin:0;
}

#nav img{
	display:inline;
}


#nav a:link, #nav a:visited, #nav a:active{
	text-decoration: none;
}

#nav a:hover{
	text-decoration: underline;
}



#nav li ul a {
	padding: 0.5em 0em;
}






#nav a.mommy {
	background: transparent url(../images/topmenu_dot.gif) right center no-repeat;
}

#nav li {
	float: left; 
	padding: 0 0.5em;
	margin:0;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto; 
	border: solid #E0E0D1 1px;
	padding: 0.5em;
	width:14em;

}


#nav li ul li{
	float:none;
	text-align:left;
	padding: 0; margin:0;
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;

}

#nav li:hover, #nav li.sfhover {
	/* background-color:#FF0000; */
	
}

/* -------  end of drop-down top menu  ---------------------- */

Code (markup):

or try your code and see what happens

 

I wouldn't - that layout is made of /FAIL/ with it's XML prolog (have fun hacking IE6), twice the number of DIV's than should be neccessary, paragraphs around **** that isn't paragraphs, absolute URL's feeding the from the same directory, willy nilly nonsensical code indentation, improper use and placement of header tags, use of SPAN to do a BR's job, rubbish CSS like needing "!important", IE7 conditional comments, floating elements that don't even need to be floating, and a whole host of other things that make it unsuitable for use as deployment code.

 

CSS layout or html layout is bad ?
or Both ?

I am getting that feeling on the html too. looks like I will no use it. I just wanted a layout that was seo friendly structure, liquid, and cross browser compliant which is hard to find after all my searches.

Thanks