...

View Full Version : css drop down menu



leemarquis
03-04-2009, 09:26 PM
Im still having IE problems with this menu and cant figure out why its not working (fine in FF). Rollover 'Hip-Hop' menu itema nd you should get a drop down. Any ideas?

http://tinyurl.com/bzvfrs (http://tinyurl.com/bzvfrs)

Thanks

twodayslate
03-05-2009, 02:54 AM
IE does not like li:hover
Look at Stu's menus. http://www.cssplay.co.uk/menus/ He does it correctly.

abduraooft
03-05-2009, 09:50 AM
Or here is a good tutorial to make such a menu, http://htmldog.com/articles/suckerfish/dropdowns/

leemarquis
03-05-2009, 10:16 AM
Thanks - but I already have the suckerfish code installed - or at least I thought I had it installed correctly - but something isnt working. So perhaps I should have rephrased my question to needing help with getting the suckerfish menu working. Any ideas?

This is the code in my header:


<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


and this is my css:



#mainlevelmainnav,#mainlevelmainnav ul{
float:left;
list-style:none;
line-height:auto;
background:#000;
font-weight:700;
margin:0;
padding:0;
width:1000px;

}




#mainlevelmainnav a{
display:block;
color:#fff;
text-decoration:none;
margin-left:8px;
margin-right:8px;
padding:5px;
}
#mainlevelmainnav li{
float:left;
padding:0;
}
#mainlevelmainnav li ul{
position:absolute;
left:-999em;
height:auto;
width:11em;
font-weight:400;
background:#444;
text-align:left;
margin:0;
}
#mainlevelmainnav li li{
width:11em;
}
#mainlevelmainnav li ul a{
width:11em;
color:#fff;
font-size:0.9em;
line-height:1em;
font-weight:400;
}

#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
background:#3a9433;
}

#mainlevelmainnav li:hover,#mainlevelmainnav li:hover,#mainlevelmainnav li.sfhover,#mainlevelmainnav li.sfhover{
left:-999em;
background:#3a9433;
}


#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{
left:auto;
z-index:6000;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover, {
background:#3a9433;
}

daemonkin
03-05-2009, 12:23 PM
This is what I use:



<script type="text/javascript">
//<![CDATA[
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
try {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
} catch(exception){

}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//]]>
</script>


Obviously replace getElementById with your own ID. Have you given your UL an ID?

D.

leemarquis
03-05-2009, 03:06 PM
Thanks - have tried this but still no drop down in IE. There must be something else preventing this from working - is anyone able too look at the page and see if they have any ideas?

http://tinyurl.com/bzvfrs - (the dropdown should be on the 'Hip-Hop' menu item)

Thanks.

abduraooft
03-05-2009, 03:36 PM
There must be something else preventing this from working - is anyone able too look at the page and see if they have any ideas? Could you make a simple test page with that menu items and some basic stuffs. Your current page has too much elements(and most of them are flashy) to concentrate.

leemarquis
03-05-2009, 04:59 PM
Thanks. Heres a link to a page with just the menu.

http://tinyurl.com/cetydt

I havent been able to test it in IE yet (crossbrowsertesing.com keeps crashing my Firefox on MAC!). So if you are able to see it working in IE then I guess there must be something else wrong on my original page thats stopping it working? Of course - if this still doesnt work on IE then any suggestions of how to fix would be appreciated.

Thanks.

twodayslate
03-05-2009, 10:11 PM
Thanks. Heres a link to a page with just the menu.

http://tinyurl.com/cetydt

I havent been able to test it in IE yet (crossbrowsertesing.com keeps crashing my Firefox on MAC!). So if you are able to see it working in IE then I guess there must be something else wrong on my original page thats stopping it working? Of course - if this still doesnt work on IE then any suggestions of how to fix would be appreciated.

Thanks.
http://ipinfo.info/netrenderer/index.php


Also I see no reason to use js for a menu like this...

Majoracle
03-05-2009, 11:33 PM
Here: http://majoracle.webs.com/dropdownmenu/dropdown-single-level-gray.htm

A Suckerfish menu I created with all known bugs fixed (tested on: IE6-IE8, Firefox, Safari, Opera, and Chrome). You can use it if you want. Should be easy for you to implement.

leemarquis
03-08-2009, 11:34 PM
Thanks - but this still doesnt work in IE on the main site so something else must be stopping it from working?

Can anyone see whats causing this not to work: http://tinyurl.com/bzvfrs

Thanks.

abduraooft
03-09-2009, 07:00 AM
Thanks. Heres a link to a page with just the menu.

http://tinyurl.com/cetydt The above menu works in both IE and FF.
So, when you put the same on your main page, the onload handler used for the hover hack might be get overridden by some other onload handlers, used for your animation or something.

JeannetteK
03-10-2009, 02:00 AM
Thanks - but this still doesnt work in IE on the main site so something else must be stopping it from working?

Can anyone see whats causing this not to work: http://tinyurl.com/bzvfrs

Thanks.

Just went to this link. The drop downs work for me just fine. I'm on IE7, Firefox and Safari.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum