Drop down menu bg opaque in FF but transparent in IE

jondouglas

12-31-2009, 12:48 PM

I am using a jQuery script for a drop down menu. It works great in FF but in IE you can see the text behind the drop down box. This is the CSS code

/* Dropdown Category Navigation */
.sf-menu, .sf-menu * {
margin:0;
padding:0;
list-style:none;
font-family: Verdana, Verdana, Geneva, sans-serif;
}

.sf-menu {line-height:2.5em;background:transparent;}
.sf-menu ul {position:absolute;width:10em; /* left offset of submenus need to match (see below) */}
.sf-menu ul li {width:100%;}
.sf-menu li:hover {visibility:inherit;/* fixes IE7 'sticky bug' */}
.sf-menu li {position:relative;}
.sf-menu a {line-height:2.5em;display:block;position:relative;color:#666;}

.sf-menu li:hover ul,.sf-menu li.sfHover ul {
border: solid 1px #E3E3E3;
padding: 0 25px 0 5px;
background: #F7F6F6;
top:30px; /* match top ul list item height */
z-index:150;
display: inline;
}

ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {top:-999em;}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {left:20em; /* match ul width */top:0;}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {top:-999em;}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {left:20em; /* match ul width */top:0;}

.sf-menu {
width:100%;
}

.sf-menu a {
padding: 8px 10px;
text-decoration: none;
color: #0F364C;
}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/color:#0066cc;}
.sf-menu li {background:transparent;color:#666; }
.sf-menu li li {background: #F7F6F6;}
.sf-menu li li li {background:#fff;}

.sf-menu a:hover, .sf-menu a:active {
color: #06202F;
}

Does anyone have any idea what might be causing this?

Thanks :)

met

12-31-2009, 12:50 PM

a link would be handy but i imagine its something to do with:

.sf-menu {line-height:2.5em;background:transparent;}
.sf-menu li { background:transparent; }

abduraooft

12-31-2009, 12:51 PM

t works great in FF but in IE you can see the text behind the drop down box. We can't see any effect from some CSS code. Please post a link to your page.

jondouglas

12-31-2009, 01:24 PM

a link would be handy but i imagine its something to do with:

.sf-menu {line-height:2.5em;background:transparent;}
.sf-menu li { background:transparent; }

Yeah I've been messing around with those lines but I'm not having any luck.

You can see it here on the right in the category section http://pixelpiys.com/wordpressmu/wordpress-mu/subteknium/

Thanks for helping

abduraooft

12-31-2009, 01:58 PM

jondouglas

12-31-2009, 02:42 PM

Try .sf-menu li {/* position:relative; */}

.sf-menu li:hover ul,.sf-menu li.sfHover ul {
border: solid 1px #E3E3E3;
padding: 0 25px 0 5px;
background: #F7F6F6;
top:auto;
z-index:150;
display: inline;
}

Thanks abduraooft! That works perfectly! :) While I'm here, another thing I've been trying to do is display the drop down inline with the category ( so it appears beside it rather than underneath it and obscuring the categories below it) Could you possibly help me with that? Thanks again.

abduraooft

12-31-2009, 02:56 PM

jondouglas

12-31-2009, 06:48 PM

Like .sf-menu li { position:relative; }
.sf-menu li:hover ul,.sf-menu li.sfHover ul {
border: solid 1px #E3E3E3;
padding: 0 25px 0 5px;
background: #F7F6F6;
top:0;
right:105%;
z-index:150;
display: inline;
}
?

Yeah that's almost it but I wanted it to appear on the right at the end of each word (I tried changing 'right' to 'left' but I would prefer it to appear at the end of each word rather then a set distance from the begining of the div).

Thanks for your time.

Excavator

12-31-2009, 07:07 PM

Hello jondouglas,
This works in FF -
/* Dropdown Category Navigation */
.sf-menu, .sf-menu * {
margin:0;
padding:0;
list-style:none;
font-family: Verdana, Verdana, Geneva, sans-serif;
}

.sf-menu {line-height:2.5em;background:transparent;}
.sf-menu ul {
position:absolute;
top: 0;
left: 100px;
width:10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {width:100%;}
.sf-menu li:hover {visibility:inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li {position:relative;}
.sf-menu a {line-height:2.5em;display:block;position:relative;color:#666;}

It also seems to work fine the way ab suggested, just needs flopped the other way. I'm not sure why the % instead of px setting though...
Try this in place of the one I posted above - .sf-menu li:hover ul,.sf-menu li.sfHover ul {
border: solid 1px #E3E3E3;
padding: 0 25px 0 5px;
background: #F7F6F6;
top:0px; /* match top ul list item height */
left: 100px;
z-index:150;
display: inline;
}