Please help with my dropdown menu!

Hello all,

I have had this issue for a week or so now and after everyone's suggestions and my own experiments I still can't manage to fix it, I have tried everything.

Question

Right now in Firefox my drop down menu covers up the button image which isn't too good.

All I need to do is change the style sheet so the drop down box will appear underneath the button image.

For some reason it works perfectly in IE.

Bellow is the style sheet for the dropdown.

.tail-top {
	background: url(images/bg.gif) repeat-x top #fff;
}
.tail-bottom {
	background: url(images/bot.gif) repeat-x bottom;
}
.col1, .col2, .col3, .col-1, .col-2, .col-3, .col-4, .col-5 {
	float: left;
}
/*======= width =======*/
#main {
	margin: 0 auto;
	text-align: left;
	width: 906px;
	position: relative;
}

/*======= header =======*/
#header {
	height: 428px;
	background: url(images/top.jpg) no-repeat top center;
}
#content .col1 {
	width: 303px;
	height: 180px;
	background: url(images/banner3.jpg) no-repeat top left;
}
#content .col2 {
	width: 302px;
	height: 180px;
	background: url(images/banner4.jpg) no-repeat top left;
}
#content .col3 {
	width: 301px;
	height: 180px;
	background: url(images/banner6.jpg) no-repeat top left;
}

}
html, body {
	height: 100%;
}
body {
	font-size: 100%;
	line-height: 1.0625em;
	background: #FFF;
}
html, input, textarea {
	font-family: Arial, Helvetica, sans-serif;
	color: #888888;

Code (markup):

Above is sections from my 2 stylesheets which is relevent to the dropdown menu, bellow is my stylesheet for the dropdown itself.

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #78C9F9;
width: 200px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
color: #000000;
background: none;
}

.anylinkmenu a:hover{ /*hover background color*/
background: #16191B;
color: #FFFFFF;
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}



/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}

Code (markup):

Here is a link to my 3 stylesheets.

https://www.sequencehosting.com/style.css

https://www.sequencehosting.com/layout.css

https://www.sequencehosting.com/anylinkmenu.css

Here is a link to my website: https://www.sequencehosting.com

Thanks allot for any help, I cannot finish my website until I fix this issue. Its holding me back allot.

Jack

 

this is just a long shot since i have my own trouble with css but did you consider adding <br /> tags between the sub links and parent links in the html? maybe just as a temporary solution?

 

Thanks for your suggestion mate, I gave it a shot but unfortunatly no luck. I guess it's because im have a dropdown but also a roll over on the image.