SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css drop down not working in IE

    Hi,

    I have a CSS drop down menu which is working fine in IE7 and firfox but will not work in IE6. I do not want to use JS for this so how can i get the drop down to work within ie6?

    xhtml:

    Code:
    //the span id is an image set in the css
    <div id="menu1"><a href="/index.php" rel="nofollow"><span id="home"></span></a>
    		<div id="drop" name="drop">
    		<ul>
    			<li><a href="/**/1.php" rel="nofollow">blah1</a></li>
    			<li><a href="/**/2.php" rel="nofollow">blah2</a></li>
    			<li><a href="/**/3.php" rel="nofollow">blah3</a></li>
    			<li><a href="/**/4.php" rel="nofollow">blah4</a></li>
    		</ul>
    		</div>
    		
    	</div>
    css:
    Code:
    #home {background-color: transparent; background-image: url(../images/home.gif); background-repeat: no-repeat; width: 40px; height: 25px; float: left;  padding: 0; margin: 0 1px 0 1px; }
    #home:hover {background-color: transparent; background-image: url(../images/homehover.gif); background-repeat: no-repeat; width: 40px; height: 25px; float: left;  padding: 0; margin: 0 1px 0 1px; }
    
    #menu1:hover ul{display: block;}
    #menu1 ul {background-color: #ffffff; width: 85px; height: auto; position: absolute; left: 500px; display: none; z-index: 1; list-style-type: none; padding: 0; margin: 25px 0 0 0;}
    #menu1 li {font-family: arial, verdana, sans-serif; z-index: 1; font-size: 10px; line-height: 18px; font-weight: normal; text-decoration: none; color: #000000; text-align: left; padding: 0 2px 0 2px; margin: 0;}
    I understand the problem maybe around the hover elment as >ie6 does not support this feature - is there any way around this

    best regards
    p_h_p

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    I have a CSS drop down menu which is working fine in IE7 and firfox but will not work in IE6. I do not want to use JS for this so how can i get the drop down to work within ie6?
    You can't - THe structure of a nested list requires you to use li:hover to achieve the styling so that a change to the parents li can trigger the childs - there's no getting around that.

    Well.. without doing some craziness to help IE
    http://www.cssplay.co.uk/menus/final_drop.html

    But the lightweight js solution to help IE understand li:hover is much cleaner and there's no maintenance problems.
    http://www.htmldog.com/articles/suckerfish/hover/


Bookmarks

Posting Permissions

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