CSS - Css Menu Stopped Working - Urgent

Built a dropdown menu (which I use on all my websites fine) and for some reason it's not working at all in IE (Using 8.0.7600), I've literally no idea why.

Here's the CSS for the navigation:
Code:

#subnav {
	display: block;
	margin: 25px 0 0 0;
	padding:0 0 0 0;
	width: 196px;
}

#subnav ul {
	width: 196px;
	margin: 0;
	padding: 0;
	list-style: none;	
	font: 11px "Verdana", "Arial", "Helvetica", "sans-serif";
	
	
}

#subnav ul ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#subnav ul li {
	float: left;
	width: 196px;
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	font-weight: bold;
}

#subnav ul li a {
	color: #017490;
	display: block;
	width: 100%;
	height: auto;
	padding: 10px 0 10px 23px;
	text-decoration: none;
	text-shadow: 0px 1px 1px #fff;
}

#subnav ul li li {
	padding: 0;
	margin: 0px 0 0 0;
}

#subnav ul li li a {
	padding: 10px 0 10px 5px;
	line-height: normal;
	text-shadow: 0px 1px 1px #000;
}

#subnav ul a.first-level {
	background: #047691 url(../images/arrow.gif) top right no-repeat;
}

#subnav ul a.sub-level {
	background: #047691 url(../images/arrow.gif) 200px 6px no-repeat;
	
}

#subnav ul li a:hover, #subnav ul li a:active, #subnav ul li:hover a, #subnav ul li.sfhover a {
	/*color: #c7bb98;*/
	text-decoration: none;
	background: url(../images/nav-bg-over.jpg) 0 2px no-repeat;
}

#subnav ul ul li:hover, #subnav ul ul li.sfhover {
	color: #FFF;
}

#subnav ul li li:hover a, #subnav ul li li.sfhover a, #subnav ul li li:hover li:hover a, #subnav ul li li.sfhover li.sfhover a, #subnav ul li li:hover li:hover li:hover a, #subnav ul li li.sfhover li.sfhover li.sfhover a {
	color: #FFF
}

/* This line cancels the highlight effect for all sub-level buttons */
body.nav-1 #subnav ul li#subnav ul-1 li a, body.nav-1 #subnav ul li#subnav ul-1 li li a, #subnav ul li li a, #subnav ul li li li a {
	background-image: none
}

body.nav-1 #subnav ul li#subnav ul-1 a, body.nav-2 #subnav ul li#subnav ul-2 a {
	color: #048451;
}
	
	#subnav ul li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		z-index: 9999;
		margin-left : 215px;
		margin-top : -32px;
		padding: 5px 5px 5px 0px;
		background-color:#047691;
		text-transform: none!important;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-bottomright: 5px;
		-moz-box-shadow: 0px 2px 2px #033f4d;
		-webkit-box-shadow: 0px 2px 2px #033f4d;
		box-shadow: 0px 2px 2px #033f4d;

	}
	
	#subnav ul li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	/* Normal color */
	#subnav ul li li a:link, #subnav ul li li a:visited, #subnav ul li:hover li a, #subnav ul li.sfhover li a, #subnav ul ul li.sfhover li a, 
	#subnav ul li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li a,
	#subnav ul li:hover li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li.sfhover li a {
		color : #FFF;
		background: #047691;
	}
	
	/* Hover color */
	#subnav ul li li a:hover, #subnav ul li li a:active, 
	#subnav ul ul li:hover a, #subnav ul ul li:hover li:hover a,
	#subnav ul li.sfhover li.sfhover a, #subnav ul li.sfhover li.sfhover li.sfhover a, #subnav ul li.sfhover li a:hover, 
	#subnav ul li.sfhover li li a:hover, #subnav ul li.sfhover li.sfhover li.sfhover li.sfhover a:hover, 
	#subnav ul li:hover li:hover a, #subnav ul li:hover li:hover li:hover a, #subnav ul li:hover li a:hover, 
	#subnav ul li:hover li li a:hover, #subnav ul li:hover li:hover li:hover li:hover a:hover
	{
		color : #FFF;
		background-color: #045669}
	
	#subnav ul li:hover ul ul, #subnav ul li:hover ul ul ul, #subnav ul li.sfhover ul ul, #subnav ul li.sfhover ul ul ul {
		left: -999em;
	}
	
	#subnav ul li:hover ul, #subnav ul li li:hover ul, #subnav ul li li li:hover ul, #subnav ul li.sfhover ul, #subnav ul li li.sfhover ul, #subnav ul li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	

The live site is demo2 . abcguide .com
(Sorry if I'm not supposed to link that.. I'll take it down.. ?)

Hi, I'm totally new to css so all help appreciated

First, here's my site: www. hornet .edu .hk /dev

As you can probably see, I'm trying to edit a template for joomla. The drop down menu for 'Test 1' is split up, so once I hover beyond 'Sub Test 1' the menu disappears. I want my submenu items to stick together so that it'll work, but I don't know where to start. can anyone help? thanks!

templace.css:
/*****************************/
/*** Core html setup stuff ***/
/*****************************/

html {
height: 100%;
margin-bottom: 1px;
}

form {
display:inline;
}

body {
margin: 0px 0px 0px 0px;
width: 100%;
display: table;
background:url(../images/bg_page.png) #DDDDDD top repeat-y;
}

body, td{
font-family: "Trebuchet MS";
font-size: 13px;
color: #000;
line-height: 1.3em;
}

a:link, a:visited {
text-decoration: none;
font-weight: normal;
}

a:hover {
text-decoration: underline;
font-weight: normal;
}

input.button { cursor: pointer; }
input.inputbox{
background:#FFF;
font-size: 11px;
color: #000;
border: 1px solid #DBDBDB;
height: 17px;
padding:2px;
-webkit-border-radius: 4px; -moz-border-radius: 4px;
}

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; margin:0px; }

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
padding: 0px;
margin: 0px;
}

div#top_menu{
height:54px;
margin:0px auto;
width: 980px;
}

#topnav{ height: 54px; width:980px; margin: 0px; padding:0px; margin-top:8px; font-weight: bold; text-transform:uppercase; }
#topnav ul { margin: 0px; padding: 0px 20px; width: auto; float: left; list-style-type:none; }
#topnav ul li{ margin: 0px; padding: 0px; height: 42px; float: left; position: relative; margin-top:7px; margin-left:7px; }
#topnav ul li a{ color: #000; font-weight: bold; text-decoration: none; padding: 0px 12px 0px 12px; height:42px; line-height:35px; display: block; float: left; -webkit-border-radius-topright: 8px; -webkit-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-topleft: 8px; }
#topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; }
#topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; }
#topnav ul li li { width:auto; height: 30px; margin-left:0px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
#topnav ul li li a { color: #FFFFFF; text-transform: none; display: block; background: none; width: 277px; border-left: 0px; padding: 0px 10px 0px 10px; height:30px; line-height:30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }
#topnav ul li li a:hover{ background: none; background-color: #FFFFFF; left: 0; width: 277px; padding: 0px 10px 0px 10px; height:30px; }
#topnav ul li ul { left: -999em; top: 26px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; padding-left:0px; }
#topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; }
#topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; }

#topnav ul.menu li{
background-image:none;
}

div#main_bg{
margin:0px auto;
width: 980px;
text-align:left;
}

div#h_area{
margin:0px auto;
width: 980px;
height:559px;
text-align:left;
padding-top:10px;
}
div#h_area img{
margin-left:14px;
}
.logo{
display: block;
float:left;
padding-top:5px;
margin-bottom:10px;
margin-left:10px;
width:520px;
}
a.logo,a.logo:link,a.logo:hover, a.logo:visited{
font-size:37px;
line-height: 58px;
color:#000;
text-decoration:none;
font-weight:normal;
font-family: "Trebuchet MS";
}

div#position0{
float:right;
text-align:left;
margin-right: 20px;
margin-top: 10px;
}

div#position0 div.search{
width: 222px;
height:46px;
text-align:left;
background: url(../images/search_bg.gif) top left no-repeat;
}
div#position0 div.search .inputbox {
background:#FFF;
width: 156px;
height: 17px;
font-size: 11px;
color: #000;
margin:10px 0px 0px 50px;
border: 1px solid #DBDBDB;
padding:5px 2px 2px 4px;
-webkit-border-radius: 4px; -moz-border-radius: 4px;
}
div#position0 label{
display:none; /* joomla 1.6 update */
}



#leftcolumn{
margin-left:9px;
padding:0px;
width:205px;
float:left;
}
#rightcolumn{
margin-right:9px;
padding:0px;
width:205px;
float:right;
}

#maincolumn{
width:520px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}
#maincolumn_middle{
width: 730px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}
#maincolumn_big{
width: 957px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}

div.path{
margin:10px 0 0 0px;
padding: 5px;
padding-left:30px;
background:url(../images/breadcrumbs_bg.png) top left no-repeat;
}

div.nopad {
float:left;
padding:0 0px 15px 0px;
}

div.nopad ul {
clear: both;
}

/*joomla 1.6 update start */
.item-separator {
height:10px;
line-height:10px;
}
.items-more {
border:1px solid #0F0;
}

table.category{
border:1px solid #CCC;
width:100%;
text-align:center;
}
table.category th,table.category td{
padding:2px 6px;
}
table.category thead{
background:#EEE;
}
.jcat-children ul,.jcat-children li{
margin:0;
list-style:none;
}
.jcat-children li a{
background:url(../images/bullet_green_arrow.png) no-repeat 0 12px;
display:block;
padding:5px 5px 5px 15px;
font-size:0.9em;
}
.image-left
{
float:left;
margin:0 15px 5px 0;
}
/*joomla 1.6 update end */

#leftcolumn div.moduletable_menu, #leftcolumn div.moduletable_menu, #leftcolumn div.moduletable, /* joomla 1.6 update */
#leftcolumn div.module_menu, #leftcolumn div.module{
margin: 10px 0px 0px 0px;
padding:0px;
width: 205px;
}
.article_column {
padding-right:10px;
}
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
margin: 10px 0px 0px 0px;
padding: 0px 0px 3px 0px;
width: 205px;
}
div.bannergroup_text {
margin:0px 13px 15px 13px;
}
.bannerheader {
font-weight:bold;
margin-bottom:10px;
}
.banneritem_text {
margin-bottom:10px;
}
.bannerfooter_text {
margin-bottom:10px;
}
#leftcolumn div.module_menu, #rightcolumn div.module_menu, /* joomla 1.6 update */
#leftcolumn div.moduletable, #rightcolumn div.moduletable, /* joomla 1.6 update */
#leftcolumn div.moduletable_menu, #rightcolumn div.moduletable_menu, /* joomla 1.6 update */
#leftcolumn div.module_menu div div div, #leftcolumn div.module div div div,
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
background: url(../images/rub_bottom.png) center bottom no-repeat;
}
#leftcolumn div.module_menu div div div, #leftcolumn div.module div div{
margin: 0px;
padding: 0px;
padding-bottom:5px;
width: 205px;
height:auto;
}

#leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div{
background: none;
padding:4px 8px;
}
#leftcolumn h3,
#rightcolumn h3{
text-align: left;
padding-left:15px;
height: 42px;
width: 190px;
line-height: 40px;
color:#FFFFFF;
font-size:19px;
margin:0px;
font-weight:normal;
text-shadow: #1F1616 1px 1px 1px;
}
table.poll thead td {
text-align: left;
padding-left:10px;
}
table.poll td {
text-align: left;
}
#leftcolumn ul.menu li ul{
list-style: none;
}
.pollstableborder {
margin: 5px 0px 10px 0px;
}
.poll td div{
display:inline;
}


/* forms

#leftcolumn .moduletable ul,
#rightcolumn .moduletable ul {
margin: 6px 0;
list-style: none;
}

#leftcolumn .moduletable ul li,
#rightcolumn .moduletable ul li {
margin: 0;
padding: 0 2px;
}
.moduletable ul {
padding:5px 10px 5px 12px;
margin:0px;
}

.moduletable ul li {
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}*/
#leftcolumn ul.menu li#current ul li,
#rightcolumn ul.menu li#current ul li {
margin: 0px;
padding: 0px;
}
ul.menu {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.menu li{
padding:0px 10px 5px 15px;
margin:0px;
}

ul.menu li ul {
padding:0px 0px 5px 0px;
margin:0px;
}
ul.menu li ul li{
padding:0px 0px 0px 15px;
border:none;
}
ul.menu li#current ul li a{
margin-left:15px;
text-decoration:none;
}
ul.mostread {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.mostread li{
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}
ul.latestnews, ul.weblinks {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.latestnews li, ul.weblinks li{
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}
div.componentheading{
font-size:16px;
font-size:19px;
margin:7px auto;
}
td.contentheading{
font-weight:normal;
vertical-align:top;
font-size:19px;
height:30px;
color:#363636;
background: url(../images/contentheading_ico.png) left top no-repeat;
}
table.contentpaneopen td.contentheading{
padding-left:34px;
}
table.contentpaneopen{
border-collapse: collapse;
margin-left:5px;
}
td.buttonheading{
padding:0px 2px 0px 2px;
}
table.contentpaneopen td{
padding:0px;
}
.contentpaneopen p{
line-height:22px;
}
span.small, td.createdate, td.modifydate{
font-size:11px;
color:#999999;
}
span.pagination span, span.pagination a{
padding:5px;
}

form#login-form { /* joomla 1.6 update */
padding: 0px;
margin: 0px;
}
fieldset.userdata { /* joomla 1.6 update */
border: none;
margin: 0px;
padding:10px 10px 10px 20px;
}

form#login-form ul { /* joomla 1.6 update */
margin:0px 0px 20px 0px;
width:120px;
}
form#login-form ul li{ /* joomla 1.6 update */
padding: 0px;
margin: 0px;
list-style: disc;
background-image:none;
}

form#login-form ul li a { /* joomla 1.6 update */
text-align: left;
font-size: 10px;
color: #858585;
}
#login-form #modlgn-username, #login-form #modlgn-passwd{
width:150px;
}
div#bottom {
width:100%;
margin:0px auto;
background:#000000;
float:left;
}

div#f_area{
background:#757575;
margin:0px auto;
width: 960px;
text-align:left;
margin-bottom:3px;
}

#f_area div.newsflash {
color:#FFF;
padding:5px 10px;
}
#f_area div.moduletable, #f_area div.moduletable_menu{
float: left;
margin:10px 5px 10px 5px;
width: 309px;
}
#f_area h3{
text-align: left;
vertical-align:bottom;
height: 35px;
width: 294px;
color:#FFFFFF;
font-size:21px;
font-family:"Trebuchet MS", Tahoma, Verdana;
font-weight:normal;
margin:0px;
padding-left: 10px;
padding-top:15px;
}

/* joomla 1.6 update start */
/* pagenav */
#main ul.pagenav {
list-style-type:none;
padding:0;
overflow:hidden
}
ul.pagenav li
{
display:inline-block;
padding:0px;
margin:0;
}
#main ul.pagenav li
{
line-height:2em
}
ul.pagenav li a
{
border: 1px solid #ccc;
display:inline;
background:#eee;
padding:2px;
text-decoration:none
}
ul.pagenav li.pagenav-prev {
float:left
}
ul.pagenav li.pagenav-next {
float:right
}

.article-info
{
margin:10px 0 10px 0px;
font-size:0.9em;
}

.article-info-term
{
display:none
}

/* ++++++++++++++ icons ++++++++++++++ */

ul.actions
{
text-align:right;
padding:0 ;
width:100%;
margin:0
}

ul.actions li
{
display:inline
}

ul.actions a
{
text-decoration:none
}

/* ++++++++++++++ items more ++++++++++++++ */

.items-more
{
padding-top:10px;
}

.items-more h3
{
font-weight:normal;
margin:0;
padding:5px 5px 5px 5px;
font-size:1.4em
}

.items-more ol
{
line-height:1.3em;
list-style-type:none;
margin:0;
padding:10px 0 10px 2px;
}

.items-more ol li
{
padding:2px;
}

.items-more ol li a
{
display:inline;
margin:0;
font-weight:normal;
padding:5px 5px 5px 20px;
}

.items-more ol li a:hover,
.items-more ol li a:active,
.items-more ol li a:focus
{
font-weight:normal;
padding:5px 5px 5px 20px;
text-decoration:none
}


/* ++++++++++++++ pagination ++++++++++++++ */

#main .pagination
{
margin:10px 0 ;
padding:10px 0 10px 0px;

}

#main .pagination ul
{
list-style-type:none;
margin:0;
padding:0;
text-align:left;
}

#main .pagination li
{
display:inline;
padding:2px 5px;
text-align:left;
border:solid 0px #eee;
margin:0 2px
}

.pagenav
{padding:2px}

#main .pagination li.pagination-start,
#main .pagination li.pagination-next,
#main .pagination li.pagination-end,
#main .pagination li.pagination-prev
{border:0}

#main .pagination li.pagination-start ,
#main .pagination li.pagination-start span
{
padding:0

}
p.counter
{
font-weight:bold;
}

/* ++++++++++++++ blog ++++++++++++++ */

.cols-1
{
display: block;
float: none !important;
margin: 0 !important;
}

.cols-2 .column-1
{
width:46%;
float:left;
}

.cols-2 .column-2
{
width:46%;
float:right;
margin:0
}

.cols-3 .column-1
{
float:left;
width:46%;
padding:0px 5px;
margin-right:4%

}
.cols-3 .column-2
{
float:right;
width:46%;
margin-left:0;
padding:0px 5px
}
.cols-3 .column-3
{
float:left;
width:100%;
padding:0px 5px
}

.items-row
{
overflow:hidden;
margin-bottom:10px !important;
}

.column-1,
.column-2,
.column-3
{
padding:10px 5px
}

.column-2
{
width:55%;
margin-left:40%;
}

.column-3
{
width:30%
}

.blog-more
{
padding:10px 5px
}

/* ++++++++++++++ readmore ++++++++++++++ */
.readmore a:link,.readmore a:visited,a.readmo link,a.readmo visited
{
color: #ccc;
background: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: none;
padding:4px 8px;
margin-top:10px;
}

.readmore a:hover,.readmore a:active,.readmore a:focus,a.readmore a:hover,a.readmore a:active,a.readmore a:focus
{
background: #333;
color: #fff;
}

a.readmo hover,a.readmo active,a.readmo focus {
background: #333;
color: #fff;
}


/* joomla 1.6 update end */

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}

#syndicate{
float:left;
padding-left: 25px;
}




/* --- slider --- */
#slider{
width: 960px;
height:415px;
margin-top:5px;
margin-left:10px;
background:url(../images/loading.gif) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:860px;
bottom:10px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(../images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}

/* --- end slider --- */

Hello, and thanks so much in advance for any assistance you could offer.

Let me start by stating that I have limited computer knowledge. I'm having problems with a drop-down menu, but if you really don't think the drop-down menu is good (I got it from somewhere else and then tweaked it through guess-and-check work), then I'll listen if you can recommend me a better one. But I'm afraid to spend the high amount of hours it would take me to switch to a different type of drop-down menu, only for someone else to tell me the new one isn't good, so please don't suggest an alternative unless you're positive it's much better.

The problem with my drop-down menu is that it doesn't work well in IE9. Note that it's designed to work when you hover over an image, as opposed to over text, and I'd like to keep it this way. The problem is that only the first item on the first drop-down level appears in IE9. Or, if you're in compatibility view, everything works except the margin or padding seems to throw off the background-color highlight when you hover over with your cursor, instead of highlighting the whole item it just gives a bar of highlight at the top of the item. I'm not overly concerned about the highlighting issue, but I realize many people won't have compatibility mode on in their browsers, so it won't work for them at all.

Here is the CSS code for the drop-down menu, followed by an example of it in use:

Code:

ul#css3menu,ul#css3menu ul{
	list-style:none;border-width:0px;}
ul#css3menu ul{
	display:none;position:absolute;98%;right:1px;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;background-color:#FDFCDC;padding:0px 0px 0px 0px;border:1px solid #0D0D0D;}
ul#css3menu li:hover>*{
	display:block;}
ul#css3menu li:hover{
	position:relative;background-color:transparent;}
ul#css3menu ul ul{
	position:absolute;top:-2px;right:100%;}
ul#css3menu{
	display:block;font-size:0;float:left;}
ul#css3menu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
	margin:0;}
ul#css3menu ul>li{
	margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
	outline-style:none;}
ul#css3menu a{
	display:block;text-align:right;font:bold 15px "arial narrow";color:#FF0000;background-color:#0D0D0D;border-width:0px;border-style:none;}
ul#css3menu ul li{
	float:none;margin:0;}
ul#css3menu ul a{
	text-align:right;padding:3px 0px 3px 0px;background-color:#0D0D0D;border-width:0px;border-style:none;font:bold 15px "arial narrow";color:#FF0000;padding-right:6px;padding-left:6px;}
ul#css3menu li:hover>a{
	background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu span{
	display:block;overflow:visible;}
ul#css3menu ul li:hover>a{
	background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu._>li>a{
	padding:0;}

So here is an example of the drop-down menu. This is only part of it, as the whole thing is very long. I think you can understand how it works like a tree, but let me know if you want more details.

Code:

<div style="position:absolute; top:53px; right:130px; z-index:6;">
<span class="menu"><ul id="css3menu">
	<li class="toplast"><span><a class="noyellow" href="http://www.themetaldiscourser.com/aggregator/index.php"><img src="http://www.themetaldiscourser.com/images/menulink-aggregator-2.png" style="filter:alpha(opacity=90); opacity:0.90; width:123px; height:18px;"></a></span>
	<ul>
		<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/business-career-and-technology-index.php">Business, career & technology</a></span></a>
		<ul>
                        <li><a href="#"><span><a href="/aggregator/accolades.php">Accolades</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/charity.php">Charity</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/instructional.php">Instructional</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/legal-controversy.php">Legal controversy</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/miscellaneous-business-and-career.php">Miscellaneous business and career</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/live-performance.php">Live performance</a></span></a>
                                <ul>
                                <li><a href="#"><span><a href="/aggregator/incidents.php">Incidents</a></span></a></li>
                                </ul>
                        </li>
			<li><a href="#"><span><a href="/aggregator/marketing.php">Marketing</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/popularity.php">Popularity</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/technology.php">Technology</a></span></a>
			        <ul>
                                <li><a href="#"><span><a href="/aggregator/instrumentation.php">Instrumentation</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/internet.php">Internet</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/production.php">Production</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/radio.php">Radio</a></span></a>
                                        <ul>
                                        <li><a href="#"><span><a href="/aggregator/internet-radio-stations.php">Internet radio stations</a></span></a></li>
                                        </ul>
			        <li><a href="#"><span><a href="/aggregator/video.php">Video</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/video-games.php">Video games</a></span></a></li>
                                </ul>
                        </li>
			<li><a href="#"><span><a href="/aggregator/stores.php">Stores</a></span></a>
                                <ul>
			        <li><a href="#"><span><a href="/aggregator/store-reviews.php">Store reviews</a></span></a></li>
                                </ul>
                        </li>
		</ul>
		</li>

		<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/genre-qualification-and-discourse-index.php">Genre qualification & discourse</a></span></a>
		<ul>
			<li><a href="#"><span><a href="/aggregator/academia.php">Academia</a></span></a>

I then bring in this drop-down menu on every page with:

Code:

<?php include("header.html"); ?>

I'm really so grateful for any suggestions. I recall the drop-down menu had problems in earlier versions of IE, which I managed to fix thanks to the help of others, so I though the problems were settled. I definitely don't have enough knowledge to fix this on my own, but if you truly believe I should switch to a new type of drop-down menu then I'm very willing to take your advice about that and put in the work. Ideally I already have a good drop-down menu that just needs to be tweaked, but hey, who knows.

PS - I do have this at the top of my page, which in similar situations I see is often cited as being the problem if it's missing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Hi All,

I have a site

PHP Code:
 hopevalleycamp.com 





which features a three box floating menu over a single background image.

The menu "works" in Firefox and Safari, but not in IE8. I'm not sure if there is a"fix" I can apply for IE or not.

The code for the menu css can be viewed here...
PHP Code:
* {
    font-family: Arial,Helvetica,sans-serif;
}
.yuimenubar {
    position: static;
    visibility: visible;
}
.yuimenu .yuimenu, .yuimenubar .yuimenu {
    left: -10000px;
    position: absolute;
    top: -10000px;
    visibility: hidden;
}
.yui-menu-shadow {
    position: absolute;
    visibility: hidden;
    z-index: -1;
}
.yuimenubar ul, .yuimenu ul {
    list-style-type: none;
}
.yuimenubar ul, .yuimenu ul, .yuimenubar li, .yuimenu li, .yuimenu h6, .yuimenubar h6 {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#productsandservices {
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 0;
    position: relative;
    z-index: 1;
}
.yuimenuitemlabel, .yuimenubaritemlabel {
    white-space: nowrap;
}
.hide-scrollbars * {
    overflow-x: hidden;
    overflow-y: hidden;
}
.hide-scrollbars select {
    display: none;
}
.yuimenu.show-scrollbars {
    overflow-x: visible;
    overflow-y: visible;
}
.yui-skin-sam .yuimenubar > .bd > ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.yui-skin-sam .yuimenubaritem {
    float: left;
}
.yui-skin-sam .yuimenubarnav .yuimenubaritem {
    line-height: 1.42em;
    margin-right: 11px;
}
.yui-skin-sam .yuimenubaritemlabel {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #FFFFFF;
    display: block;
    line-height: 1.42em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.yui-skin-sam .yuimenubaritemlabel-selected, .yui-skin-sam .yuimenubaritem a.active, .yui-skin-sam .yuimenubaritem-hassubmenu-selected {
    color: #FFFFFF;
}
.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel {
    font-size: 34px !important;
    font-weight: bold;
    line-height: 1.42em;
}
.yui-skin-sam .yuimenu .bd {
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    top: 0;
    width: 151px;
}
.yui-skin-sam .yuimenu ul {
    padding-bottom: 10px;
    padding-left: 19px;
    padding-right: 19px;
    padding-top: 10px;
}
.yui-skin-sam li.first-of-type a.active, .yui-skin-sam li.first-of-type a.yuimenubaritemlabel-selected {
}
.yui-skin-sam .yuimenuitemlabel {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    padding-left: 12px;
    text-decoration: none;
    text-transform: uppercase;
}
.yui-skin-sam .yuimenuitemlabel-selected, .yui-skin-sam .bd .yuimenuitem a.active {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/drop-hover.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    color: #AF4B3E;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
}
#yui-gen0 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    width: 210px;
}
#yui-gen0 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen0 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen0 .yuimenuitemlabel-selected, #yui-gen0 .bd .yuimenuitem a.active {
    color: #95D4B5;
}
#yui-gen1 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li2.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    width: 210px;
}
#yui-gen1 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen1 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li2-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen1 .yuimenuitemlabel-selected, #yui-gen1 .bd .yuimenuitem a.active {
    color: #F7C609;
}
#yui-gen2 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li3.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-right: 0;
    width: 210px;
}
#yui-gen2 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen2 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li3-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen2 .yuimenuitemlabel-selected, #yui-gen2 .bd .yuimenuitem a.active {
    color: #C01349;
}
.first-of-type a, .first-of-type li a.active, a.yuimenubaritemlabel {
    color: #FFFFFF;
    font-size: 34px;
    text-transform: uppercase;
} 





All help appreciated in advance!

I have a pure css menu that I like but it does not work with IE. works exactly as I want in firefox.
in IE when I hover over the menu bar the list do not become visible
any one know what I need to do to make it work?
Thanks
BadIdea

The page code is
Code:

<html>
<head>
	<meta name="author" content="Jeffrey Bourque">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="cache-control" content="no-cache">
	<link rel="stylesheet" type="text/css" href="menuCss.css" />
	<title>Operations Control</title>
</head>

<body>

<div class="mainheader">
	<table>
		<tr><td><img src="img/sitelogo.png" width="135" height="59"/></td><td><h1>Operations Control</h1></td></tr>
		<tr><td colspan="2"><?php echo "Welcome! $useid "; ?> -- <a href="../logout.php" class="nh"> Log Out</a></td></tr>
	</table>
</div>

	<div id="navMenu">

	<ul>
		<li><a href="#">Home</a>
			<ul>
				<li><a href="#">My Evaluations</a></li>
				<li><a href="#">My Approvals</a></li>
				<li><a href="#">My Actions</a></li>
				<li><a href="#">Phone List</a></li>
				<li><a href="#">Training</a></li>
				<li><a href="#">Change Password</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Manufacturing</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Quality</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Engineering</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Planning</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">My Actions</a></li>
				<li><a href="#">Phone List</a></li>
				<li><a href="#">Change Password</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Accounting</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Materials</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Engineering</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<br class="clearFloat" />
	</div> <!-- end navMenu -->


</body>
</html>

The Css is
Code:

body
	{
		margin:0;
		padding:0;
		background:#D0E2DD;
	}

.mainheader
	{
		background:#F2F2F2;
		margin:0;
		padding-left:30px;
		padding-top:20px;
		padding-bottom:5px;
		padding-right:10px;
	}

.mainheader h1
	{
		color:#000000;
		font-size:36px;

	}

.navBar
	{
		background:#7777BB;
		color:#2554C7;
		line-height:30px;
	}

.endBar
	{
		clear:both;
		background:#FFFFFF;
		padding:0px 10px;
		border-bottom:1px solid #808080;
	}

.floatR
	{
		float:right;
	}

#navMenu
	{
		margin:0;
		padding:0;
		
	}

#navMenu ul
	{
		margin:0;
		padding:0;
		line-height:30px;
	}

#navMenu li
	{
		margin:0;
		padding:0;
		list-style:none;
		float:left;
		position:relative;
		background:#7777BB;
	}

#navMenu ul li a
	{
		text-align:center;
		font-family:"Comic Sans MS", cursive;
		text-decoration:none;
		height:30px;
		width:150px;
		display:block;
		color:#ffffff;
		border:1px solid #ffffff;
		text-shadow:1px 1px 1px #000000;
	}

#navMenu ul ul
	{
		position:absolute;
		visibility:hidden;
		top:32px;
	}

#navMenu ul li:hover ul
	{
		visibility:visible;
	}


#navMenu li:hover
	{
		background:#aaaaaa;
	}

#navMenu ul li:hover ul li a:hover
	{
		background:#F2F2F2;
		color:#000;
	}

#navMenu a:hover
	{
		color:#0088ff;
	}

.clearFloat
	{
		clear:both;
		margin:0;
		padding:0;
	}

Greetings, I sure would appreciate some help integrating a css dropdown menu into a site. If you visit www.mts-diesel.com in FF, the drop down works find, If you open it in IE9 the dropdown does not work, BUT if you open this page www.mts-diesel.com/menu.html in IE9 the dropdown works. This leads me to think that it might be some type of z-index issue perhaps but I cant put my finger on it. Thanks for any help. Tom

dawuster.com/test/index2.htm

I can't figure out why my "Manufacturers" css drop menu on the left side doesn't work. It works it its own .htm document when i was developing it but once I stick it in to a pre-existing page, it won't function. Thanks in advance!

Any reason why Netscape 7.x would just stop rendering a style sheet?

All works fine in IE, but when I view the site in Netscape it looks like it's missing the style sheet completley.

It's my fault for not checking IE after every change but somehow a div stopped stretching and I can't find the problem. Works great in FF but not in IE 6 or 7.

Here's the problem page

It just doesn't make sense to me. Am I missing a hack maybe?

Hi,

While testing our webpage, we found that in all browsers the CSS menu works fine
except in Safari, on browsing the child nodes of the menu. The menu just closes
on the second or third select.

I would greatly appreciate any help to fix this bug.

The CSS code is below.

Regards,
Sharon.

Code :
<style type="text/css" media="screen">
/**************** menu coding *****************/
#menu {
width: 100%;
background: #eee;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

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

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

</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

Am I missing something? I am using the following code and it works if I put it in the head, but doesn't work if I put it in an external style sheet. I know I am sleep deprived but am I missing something simple?


.m_isabel
{
display: block;
width: 175px;
height: 20px;
background: url("jpg/m_isabel.jpg") no-repeat 0 0;

}

.m_isabel:hover
{
background-position: 0 -20px;
}

.m_isabel span
{
display: none;
}


In body:

<a href="#" class="m_isabel" title="Isabel"><span>F. Isabel </span></a>

I dont understand what I am missing, the menu is suppose to be a drop down menu (and suppose to be horizontal, but i havent got that far yet) but its not dropping, its displaying everything? I would appreciate any help on making it work correctly, thanks much!

-Sean

nav_style.css file:
Code:

body {
	font-family: Arial, Helvetica, sans-serif;
}

#nav {
	width: 200px;
	font-family: Arial, Helvetica, Sans-serif;
}

#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav li { 
	border-bottom: 1px solid #ed9f9f;
}

#nav li a:link, #nav li a:visited {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 12px solid #711515;
	border-right: 1px solid #711515;
	background-color: #b51031;
	color: #ffffff;
	text-decoration: none;
}

#nav li a:hover {
	background-color: #711515;
	color: #ffffff;
}

#nav ul ul {
	margin-left; 12px;
}

#nav ul ul li {
	border-bottom: 1px solid #711515;
	color: #ffffff;
}

#nav ul ul a:link, #nav ul ul a:visited {
	background-color: #ed9f9f;
	color: #711515;
}

#nav ul ul a:hover {
	background-color: #711515;
	color: #ffffff;
}

and here is the head_nav.php file:
Code:

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css_inc/nav_style.css" />
</head>

<body>

<div id="nav">
 <ul>
  <li><a href="#">Services</a>
  	<ul>
  	<li><a href="#">Cinematography</a></li>
  	<li><a href="#">Photography</a></li>
   </ul>
  </li>
  <li><a href="#">Video</a>
  	<ul>
  	<li><a href="#">Demo Reel</a></li>
  	<li><a href="#">Music Video</a></li>
	<li><a href="#">Commercial</a></li>
   </ul>
  </li>
  <li><a href="#">Photo Gallery</a></li>
  <li><a href="#">About Valliant</a>
   <ul>
  	<li><a href="#">Biography</a></li>
  	<li><a href="#">Resume</a></li>
	<li><a href="#">Contact</a></li>
   </ul>
  </li>
  <li><a href="#">Links</a></li>
  <li><a href="#">Home</a></li>
 </ul>
</div>

</body>
</html>

Hi,

I am trying to make a dropdown menu by using only CSS and no Javascript.

Here is my HTML

Code:

<ul id="nav">
										                                            <li>
<a href="/family-flowers.html"><span>Family Flowers</span></a>
<ul>
<li>
<a href="/family-flowers/anniversary-flowers.html"><span>Anniversary Flowers</span></a>
</li>
<li>
<a href="/family-flowers/birthday-flowers.html"><span>Birthday Flowers</span></a>
</li>

<li>
<a href="/family-flowers/christmas-bouquets.html"><span>Christmas Bouquets</span></a>
</li>
<li>
<a href="/family-flowers/new-baby.html"><span>New baby</span></a>
</li>
</ul></li>
                                                                                    <li class="level item-2 nav-congratulation">
<a href="/congratulation.html"><span>Congratulation</span></a>
</li>
                                                                                    <li class="level item-3 nav-corporate">
<a href="/corporate.html"><span>Corporate</span></a>

</li>
                                                                                    <li class="level item-4 nav-get-well">
<a href="/get-well.html"><span>Get Well</span></a>
</li>
                                                                                    <li class="level item-5 nav-love">
<a href="/love.html"><span>Love Bouquets</span></a>
</li>
                                                                                    <li class="level item-6 nav-mixed">
<a href="/mixed.html"><span>Mixed</span></a>
</li>
                                                                                    <li class="level item-7 nav-monthly">

<a href="/monthly.html"><span>Monthly</span></a>
</li>
                                                                                    <li class="level item-8 nav-funeral">
<a href="/funeral.html"><span>Funeral</span></a>
</li>
                                                                                    <li class="level item-9 nav-window">
<a href="/window.html"><span>Window plants</span></a>
</li>
                                                                                
										</ul>
						

and this is my CSS
Code:

#nav { list-style:none; margin:0; padding:0; width:150px; }

#nav li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

#nav li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

#nav li:hover ul { display: block; }

everything is fine, only on my hovering, the sub UL is not displaying even i made it to display as BLOCK on hover.

can anybody help with this please?

thank you very much

[edit]

in fact it is working in FF but not in IE

[/edit]

Hey Guys, was hoping someone could look at my code and tell me what is wrong. My website (http://www.ecbsa.co.za/) refuses to show what page i am on in the menu by highlighting it etc. Here is the CSS:

Code:

/* - - - BASIC styles [ MANDATORY ] - - - */

.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
font-family: arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 11px;
line-height:1.3em;
list-style-type: none;
display: block;
height:44px;
}

.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;	/* move all main list items into one row, by floating them */
position: relative;	/* position each LI, thus creating potential IE.win overlap problem */
z-index: 5;		/* thus we need to apply explicit z-index here... */
}

.menu li:hover {
z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}

.menu ul {
visibility: hidden;	/* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0;	/* while hidden, always keep them at the top left corner, */
top: 0;		/* 		to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
visibility: visible;	/* display submenu them on hover */
top: 100%;	/* 1st level go below their parent item */
}

.menu li li:hover>ul {	/* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}

/* -- float.clear --
force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul {	/* IE7 float clear: */
min-height: 0;
}
/* -- float.clear.END --  */

/* -- sticky.submenu -- */
.menu ul {
background-image: url(empty.html);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
padding: 10px 20px 20px 20px;
margin: -10px 0 0 -20px;
/* background: #fcfcfc;*/	/* uncomment this if you want to see the "safe" area.
you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
padding: 20px 20px 20px 10px;
margin: -30px 0 0 0px;
}
/* -- sticky.submenu.END -- */


/* - - - DESIGN styles - - - */

/* main upper bar */
#main-nav {
background: url(img/_ui/main_nav.jpg) left top no-repeat;
width:967px;
height:44px;
text-align: center;
}

.menu {
width:967px;
}

/* main upper bar */
.menu, .menu ul li {
color: #ff6600;
}

.menu ul {
width: 45em;
}


.menu a:active{
text-shadow: #006699 1px 1px 2px;
color: #ff6600;
padding: .5em 3.5em;
display: block;
position: relative;
}

.menu a {
text-shadow: #006699 1px 1px 2px;
color: #fff;
padding: .5em 3.5em;
display: block;
position: relative;
}


.top-level {
width:59px;
margin-top: 5px;
/*padding-top:2.0em;*/
line-height: 1.1em;
font-size:11px;
}

.menu ul li a ul li {
text-align: left;
}

.menu a:hover, .menu li:hover {
text-shadow: #006699 1px 1px 2px;
display: block;
color: #FAA93B;
}

.menu a:active {
text-shadow: #006699 1px 1px 2px;
color: #ff6600;
padding: .5em 3.5em;
display: block;
position: relative;
}

/* submenu hover colours */
.menu li li a:hover {
display: block;
color:  #F89624;
background-color:#D9D4CE;
}


.menu ul>li + li {	/* and remove the top border on all but first item in the list */
border-top: 0;
}

.menu li li:hover>ul {	/* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;
}

#lhs {
	background-image: url(img/_ui/lhs_bg_20080401.jpg);
	background-position: right top;
	background-repeat: repeat-y;
}

.lhs_div {
height:1px;
text-align:right;
	background-image: url(img/_ui/lhs_dotted_div_333.png);
	background-position: right middle;
	background-repeat: no-repeat;
}

And here is the HTML:

Code:

<!-- menu updated 20091218 -->
<div id="main-nav">
<ul class="adxm menu">

<li><a class="top-level"  a href="<%=getCurrentAttribute('site','homepageurl')%>"><b>Home<br>Page</b></a>

</li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/FAQ"><b>FAQ<br>(Questions)</b></a></li>

<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/Information"><b>Info<br>(Information)</b></a></li>

<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/New-Contractors"><b>New<br>Contractors</b></a>

<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/Contact-Us"><b>Contact<br>Us</b></a></li>

<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level"><b><br></b></a></li>

<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="https://checkout.netsuite.com/app/center/nlvisitor.nl/c.1123442/n.1/sc.6/.f"><b>My<br>Account</a></b></li>

</ul>
</div>


<!-- menu updated 20091218 -->
 

<br><br>

</td></tr>
<!-- LOGOS AND TABS -->	
</table>
</div>

Hey there again!

I have been at it ALLLLLLLLLLLL day, trying to figure out this blasted css menu to work in IE6!!!

It works fine in FF but dosnt seem to like IE6 and was wondering if someone could please help me figure out the problem

The first dropdown block ( <ul class="nav"> ) works fine but the second block ( <ul class="sub"> ) inside the first block ( <ul class="nav"> ) doesn't show properly in IE6!!

Here is a screen shot of my problem:


Here is my css:
PHP Code:
.navbar :hover ul.nav {
padding:0; margin:0; 
left:0; top:40px; 
width:136px; 
z-index:604;
background-color:#333333; }

.navbar :hover ul.nav li a {
display:block; 
height:24px; width:136px;}

.navbar :hover ul.nav li a:hover {background:#ad8d12;}

.navbar :hover ul.nav :hover ul.sub{
padding:0; margin:0; 
left:104px; top:-4px; 
width:200px; 
z-index:606; 
background-color:#333333;}

/* keep the 'next' level invisible by placing it off screen. */
.navbar ul.nav, 
.navbar :hover ul.nav ul.sub
{position:absolute; left:-9999px;} 






Here is my HTML code:
PHP Code:
<ul class="navbar">
    <li><a href="#">Link<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="nav">
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2<!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub">
                    <li><a href="#">Link3</a></li> 
                    <li><a href="#">Link3</a></li>
                    <li><a href="#">Link3</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul> 







Thanks a million for even reading up to here