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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS dropdown menu, not working in IE6

    I have a really basic css dropdown menu that works great in IE7 and FireFox. However, it doesn't work in IE6. The sub bullets aren't showing up at all.

    HTML Code:
    <ul id="acctmenu">
    <li style="list-style:none"><b>MY ACCOUNT</b>
    <ul><li><a href="https://www.greenmountain.com/my_account/index.jsp" target="_blank">Residential</a> </li>
    <li><a href="http://b2b.greenmountainbilling.com/Login.aspx?ReturnUrl=%2fDefault.aspx" target="_blank">Commercial</a>
    </li></ul></li>
    </ul>

    CSS:

    #acctmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }


    #acctmenu ul li {
    position: relative;
    list-style:none
    }

    #acctmenu li ul {

    top: 20px;
    left:827px;
    display: none;
    text-align:left;
    padding-top:2px;

    }

    #acctmenu ul li a {
    display: block;
    text-decoration: underline;
    }

    #acctmenu li:hover ul, li.over ul { display: block}

    Thanks so much for any help!!!

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    IE6 doesnt do hover on non link elements.

    try these:

    http://www.xs4all.nl/~peterned/csshover.html

    http://www.htmldog.com/articles/suckerfish/

    first one makes hover on everythign you want but requires HTC file and some servers might not allow it.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the info. So, does it mean then I should be able to use an empty link and then the hover would work?

    I tried the Suckerfish code and didn't have any luck

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by mswanndeford View Post
    Thanks for the info. So, does it mean then I should be able to use an empty link and then the hover would work?

    I tried the Suckerfish code and didn't have any luck
    Then show us what you did so we can help. Can't help you if you don't show us what you did. Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    #acctmenu, #acctmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
    
    #acctmenu li {
    float: left;
    position: relative;
    width: 10em;
    }
    
    #acctmenu li ul {
    top:1em;
    left:27px;
    display: none;
    position:absolute;
    text-align:left;
    padding-top:2px;
    }
    
    li > ul {
    top: auto;
    left: auto;
    }
    
    #acctmenu li a {
    display: block;
    text-decoration: underline;
    }
    
    #acctmenu li:hover ul, #acctmenu li.over ul { display: block} 
    </style>
    <script type="text/javascript">
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("acctmenu");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    </script>
    </head>
    <body>
    <ul id="acctmenu">
    	<li style="list-style:none"><b>MY ACCOUNT</b>
    		<ul>
    			<li><a href="https://www.greenmountain.com/my_account/index.jsp" target="_blank">Residential</a> </li>
    			<li><a href="http://b2b.greenmountainbilling.com/Login.aspx?ReturnUrl=%2fDefault.aspx" target="_blank">Commercial</a> </li>
    		</ul>
    	</li>
    </ul>
    </body>
    </html>
    Last edited by _Aerospace_Eng_; 05-23-2007 at 10:30 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aerospace_Eng, your kung fu is powerful.

    Thanks so much, you are truly the supreme one!!!


  •  

    Posting Permissions

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