CSS - Drp Down Menu Not Working On Ie8

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!

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">

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>

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

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]-->

Hi,

I was about to put my new website online when I noticed that our CSS drop-down menu no longer works in Internet Explorer.

The site is built off some software that we bought (a billing system called AWBS). When I got our template up and running on it, the menu worked fine in IE. Today I did some upgrades to the software, which included changing some of the templates around. I was careful to not disturb much in my template files, however it seems that I have, and I have no idea what.

You can see the site at http://www.estyles.com.au/awbs/testpage.php . The menu works fine in FireFox, and previously worked fine in IE before I upgraded. All the CSS for the menu can be found at http://www.estyles.com.au/awbs/temp...es/css/menu.css .

The code for the menu is:

Code:

<ul id="nav">
	<li><a href="http://www.estyles.com.au/awbs/index.php">HOME</a>
	</li>
	
	<li><a href="#">WEBHOSTING</a>
		<ul>
			<li><a href="http://www.estyles.com.au/awbs/hostingoverview.php" class="menuitem">Overview</a></li>

			<li><a href="http://www.estyles.com.au/awbs/hosting.php?spt=1" class="menuitem">Shared Hosting</a></li>
			<li><a href="http://www.estyles.com.au/awbs/hosting.php?pt=r" class="menuitem">Reseller Hosting</a></li>
			<li><a href="http://www.estyles.com.au/awbs/specials.php" class="menuitem">Specials</a></li>
		</ul>
	</li>

	<li><a href="#">DOMAINS</a>

		<ul>
			<li><a href="http://www.estyles.com.au/awbs/check.php" class="menuitem">Register Domain</a></li>
			<li><a href="pricing.php" target="_blank" onClick='window.open("http://www.estyles.com.au/awbs/pricing.php","pricing","width=700,height=300,status=yes,scrollbars=1,resizable=1");return false;' class="menuitem">Domain Prices</a></li>
			<li><a href="http://www.estyles.com.au/awbs/transcheck.php" class="menuitem">Transfer Domain</a></li>
			<li><a href="http://www.estyles.com.au/awbs/whois.php" class="menuitem">Whois Lookup</a></li>
		</ul>
	</li>

	<li><a href="#">SERVICES</a>
		<ul>
			<li><a href="http://www.estyles.com.au/awbs/webdesign.php" class="menuitem">Web Design</a></li>
		</ul>
	</li>
	
	

	<li><a href="#">ACCOUNT</a>
		
		
		<ul>

			<li><a href="http://www.estyles.com.au/awbs/cart.php" class="menuitem">My Cart</a></li>
			<li><a href="http://www.estyles.com.au/awbs/welcome.php" class="menuitem">My Account</a></li>
			<li><a href="http://www.estyles.com.au/awbs/helpdesk.php?search=open" class="menuitem">Support System</a></li>
			<li><a href="http://www.estyles.com.au/awbs/tos.php" class="menuitem">Terms of Service</a></li>
			<li><a href="http://www.estyles.com.au/awbs/LogOut.php" class="menuitem">Log Out</a></li>
			
							
				<li><a href="http://www.estyles.com.au/awbs/admin/adminwelcome.php" class="menuitem" target="_blank">Admin</a></li>

				
							
		</ul>
		
			</li>
</ul>

The HTML is messy and I have no idea where to start looking for the problem. The header and footer on the page both changed during the upgrade but the main content (everything inside the body tags) did not, so I suspect that the problem does not lie within the main content area.

If someone could at least point me in the right direction then I would greatly appreciate it, thanks

This is driving me crazy!

I'm experimenting with the "MyGosu" menu (the drop-down menu at the top of the page) inside of the default Mambo template.

See my efforts he http://www.mediamogulsweb.com/client/Mambo/

The menu works fine in Mozilla/Firefox, but is failing in IE6 and IE7...

In IE, the pop-out submenus don;t appear...But I'm thinking that they actually do appear, but are being obscured by the header image (or something else?)....So I adjusted the z-index of the header image div to "1", but that didn;t do the trick...

What is going on here? Any ideas are appreciated...

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>

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>

I'm trying to get a dropdown menu to work properly (with IE, it works fine in FF) in the sidebar, thus vertically not horizontally. This dropdown menu has worked fine before, but only when using it horizontally, across the top.

Basically, it prevents the user from clicking on the submenu options (I'm thinking it has something to do with z-index), but the parent menu options work fine. You can see the issue here with IE6 or 7:

http://www.groundedgroup.com/clients/NWR/

Here's the respective CSS:

Code:

/* Sidebar / Menu */

#sidebar {
	float: left;
	top: 16px;
	left: 2px;
	display: block;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#FFFFFF;
	letter-spacing: 1px;
	text-align:right;
	z-index: 3;
}

#sidebar ul {
	list-style-type: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 4;
}

#sidebar li {
	display: block;
	float: left;
	min-height: 20px;
	position: relative;
	text-align: left;
	padding: 5px 20px 4px 16px;
	margin: 0px 0px 0px 0px;
}

#sidebar h2 {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
}

#sidebar li ul {
	width: 150px;
	height: auto;
	top: 100%;
	left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 3px;
}

#sidebar li.LargeMenu ul {
	width: 200px;
	height: auto;
	top: 100%;
	left: 0px;
}

#sidebar li ul li {
	text-align: left;
	width: 118px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar li.LargeMenu ul li {
	text-align: left;
	width: 198px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar a {
	text-decoration: none;
	letter-spacing: 1px;
	}

#sidebar li li ul {
	top: 0;
	left: 0;
}

#sidebar li li:hover ul {
	left: 150px;
}

/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
	position: absolute;
	display:none;
}

/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
 	 display: block;
}

#sidebar #PhpWebcontent {
	display:none;
}	

/* define the consecutive colors */

#sidebar {
	color: #FFFFFF;
}

#sidebar ul{
	-moz-opacity: 1; /* for mozilla */
	opacity: 1; /* for safari */
	khtml-opacity: 1/* for konquerer and older safari */
}

#feeds li {
  background: url(images/feed.png) top left no-repeat;
  padding-left: 18px;
}

#sidebar h2 {
	color: #FFFFFF;
}

#sidebar a {
	color: #ffffff;
	letter-spacing: 1px;
	}

#sidebar ul li:hover {
	background: #333333;
}

#sidebar ul li ul {

}

#sidebar ul li ul li {
	background: #333333;
}

#sidebar ul li ul li:hover {
	background: #666666;
}

#sidebar ul li ul ul li{
	background: #666666;
	
}

#sidebar ul li ul ul li:hover {
	background: #999999;
}
/* End Sidebar / Menu */

Any ideas on how to make this work properly when used on the side?

Thanks in advance.

Here is the issue in firefox:

It's displaying the divider 1 pixel down?

It displays inline with IE.

The code is:

#navigation {
height:37px;
background: url(/img/menu_bg.jpg) repeat-x;
}

#navigation ul{
list-style:none;
}

#navigation ul li{
display: block;
float: left;
width:83px; /* 751 divided by number of items (9) */
text-align:center;
background: url(/img/divider.jpg) right no-repeat;
line-height:37px;
}

#navigation ul li.last{
background: none;
}

#navigation a:link,#navigation a:visited {
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}

#navigation a:hover {
color:#ff9f47;
}

Help appreciated.

I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted.

The double row drop down menu bar looks like this:
[menu1][menu2][menu3]
[menu4][menu5][menu6]
............................[menu6a]
............................[menu6b]

I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't.

Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id.

This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in.


CSS Code:
Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }

  

 .nav1 {float:left; position:relative;display:block;}


 .nav1 li {margin:0px; padding:0px; display:inline;}


 .nav1 li a {height:30px; float:left; list-style:none;}


 a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/


  


 #home a{


     float:left;


     background-image: url(images/nav_main_1.png);


     display: block;


     height: 30px;


     width: 132px;


     text-decoration: none;


     background-position: 0px -31px;


 }


  


 }


 #home a:hover, a.current{


     background-image: url(images/nav_main_1.png);


     background-position: 0px 0px;


 }


 #news a{


     float:left;


     background-image: url(images/nav_main_2.png);


     display: block;


     height: 30px;


     width: 131px;


     text-decoration: none;


     background-position: 0px -31px;


 }


 #news a:hover, a.current {  


     background-image: url(images/nav_main_2.png);


     background-position: 0px 0px;


 } 

html4strict Code:
Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul>

  

 <ul class="nav1">


         <li id="home" class="current"><a href="#"><span>Home</span></a></li>


         <li id="news"><a href="#"><span>News</span></a></li>                    


 </ul> 

Any help is greatly appreciated, I would imagine I am missing something simple.