CSS Forum

**zomex** · 11:40 PM

Hi all,

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.

Code:

.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;
background: #78C9F9;
width: 200px;
}

.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;
}

.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;
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;
}

The problem can be seen by scrolling over the top buttons on the index page of my site (in sig)

Thanks for any help,

Jack

**LadynRed** · 07-06-2009, 10:51 AM

Set #main to position:relative, then put the menu INSIDE #main. As you have it now, your menu is OUTSIDE of #main, so your positioning is relative to the <body> and not the centered #main, which is throwing off your menu placement.

**zomex** · 07-06-2009, 11:10 AM

Quote:

Originally Posted by LadynRed

Set #main to position:relative, then put the menu INSIDE #main. As you have it now, your menu is OUTSIDE of #main, so your positioning is relative to the <body> and not the centered #main, which is throwing off your menu placement.

Ahh I see thanks allot! I kind of understand what you mean. Do you mind explaining a little bit more? Sorry for my lack of knowledge. Im really happy there is a fix.

**LadynRed** · 09:24 PM

Please don't keep posting to ask the same question. Some of us WORK for a living and do not LIVE here

You have a div in your code called "main" - in the code it says div id="main". In the CSS, it is referenced as #main.

**zomex** · 07-06-2009, 08:12 PM

Quote:

Originally Posted by LadynRed

Please don't keep posting to ask the same question. Some of use WORK for a living and do not LIVE here

You have a div in your code called "main" - in the code it says div id="main". In the CSS, it is referenced as #main.

Sorry just really excited about getting this working.

I am still lost by what you mean "put the menu inside #main?" I have added position: relative; under the main class on the layout.css

Thanks for your time.