Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts

    css drop down menu

    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


    Thanks
    WOW Paradise - Exclusive - Insiders Report!
    Download Free Insiders Report!!! www.wowparadise.eu

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    IE does not like li:hover
    Look at Stu's menus. http://www.cssplay.co.uk/menus/ He does it correctly.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Or here is a good tutorial to make such a menu, http://htmldog.com/articles/suckerfish/dropdowns/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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:

    Code:
    #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;
    }
    WOW Paradise - Exclusive - Insiders Report!
    Download Free Insiders Report!!! www.wowparadise.eu

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    This is what I use:

    Code:
    <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.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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.
    WOW Paradise - Exclusive - Insiders Report!
    Download Free Insiders Report!!! www.wowparadise.eu

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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.
    WOW Paradise - Exclusive - Insiders Report!
    Download Free Insiders Report!!! www.wowparadise.eu

  • #9
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by leemarquis View Post
    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...
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #10
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Here: http://majoracle.webs.com/dropdownme...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.

  • #11
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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.
    WOW Paradise - Exclusive - Insiders Report!
    Download Free Insiders Report!!! www.wowparadise.eu

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    New Coder
    Join Date
    Feb 2009
    Location
    Saint Anthony, Indiana
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by leemarquis View Post
    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.
    Last edited by JeannetteK; 03-10-2009 at 03:03 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •