Drop down menu problem

[danposs86]

I have been using a drop down menu, spent a while making it match the style that i wanted, once done i carried on with the site.In firefox it works fine, the drop down sections appear and i am able to hover over all of the sections. However, in IE, if i hover the curser over a drop down menu section and there is something behing it, text or image, the drop down menu disappears as if IE is putting the focus on the text behind the drop down.Hopefully that makes sense, if not ask and i can display the coding.Example here: click hereEDIT: look at the nav bar system in Firefox and IE and you will see what i mean, it messes up when the curser goes over the 'Company Logo' image.Any ideas how to fix this??

[yoshida]

First of all: kudos on how you made it work, and how it looks. You properly used css for the list style, and javascript to make IE6 support the hover function.I took a quick look at your css, and it seems generated by some program of sorts... I can't make much sense of the formatting, it's not easy to understand that single long line of code. Could you please post a formatted version here?My guess is that IE6 gives a higher priority to the image, since it's below the menu (in your source code) and thus rendered later. You could try increasing the margin for the main content, place the code for your menu after everything else (is easier for screenreaders too) and give it an absolute position so it displays at the top of your page. The menu will render after loading the rest of the page, and may have a higher priority that way.

[danposs86]

I took a quick look at your css, and it seems generated by some program of sorts... I can't make much sense of the formatting, it's not easy to understand that single long line of code. Could you please post a formatted version here?

Shouldn't be lol.

/* ******************************** *//* CSS Document - ak_stylesheet.css *//* ******************************** */body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	padding: 0px;		background-color: #CEE1F4;	font: 80% verdana, arial, sans-serif;}/* ******************************** *//* Link Properties					*//* ******************************** */Link Properties Here/* ******************************** *//* Navigation Properties			*//* ******************************** */dl, dt, dd, ul, li {	margin: 0;	padding: 0;	list-style-type: none;}#menu {	position: absolute; /* Menu position that can be changed at will */	top: 20;	left: 20;}#menu dl {	float: left;	width: 178px;}#menu dt {	cursor: pointer;	text-align: center;	font-weight: bold;	background: #D8E6F5;	background-image: url(graphics/button.gif);	height: 47px;	line-height: 47px;}#menu dd {	display: none;	border: 1px solid #5A9ADA;}#menu li {	text-align: center;	background: #F7FAFD;}#menu li a, #menu dt a {	color: #000;	text-decoration: none;	display: block;	height: 100%;	border: 0 none;}#menu li a {	padding-bottom: 2px;	padding-top: 2px;}#menu li a:hover, #menu li a:focus {	background-color: #D8E6F5;}#menu dt a:hover, #menu dt a:focus {	background-image: url(graphics/button_over.gif);}/* ******************************** *//* Main Properties					*//* ******************************** */.container {	width: 900px;	margin: auto;	padding: auto;}.main_logo {	height: 155px;	background-image: url(graphics/top_logo_border.gif);	background-repeat: no-repeat;}.logo_div {	padding-left: 32px;	padding-top: 31px;	width: 248px;	height: 97px;}.main_container {	width: 890px;	padding-left: 5px;}.main_border {	background-image: url(graphics/side_border.gif);	background-repeat: repeat-y;}.nav_container {	height: 80px;}.main_content {	width: 700px;	padding-left: 100px;	padding-bottom: 15px;}.top_area {	text-align: right;	height: 35px;}.footer {	height: 55px;	background-image: url(graphics/bottom_border.gif);	background-repeat: no-repeat;	padding-bottom: 10px;}

Thats how it looks in the CSS file lol

[danposs86]

I actually took the nav bar from here: http://tutorials.alsacreations.com/deroulant/