Results 1 to 3 of 3

Thread: CSS dropdown menu browser compatibility pb

  1. #1
    Join Date
    Dec 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default CSS dropdown menu browser compatibility pb

    1) Script Title: Dropdown menu arrow.gif displays fine in Netscape/Safari/FireFox/IE 7 but doesn't work in IE 6/5.x

    2) Script URL:
    I've created 2 CSS scripts one for ie using the condition <!--[if lte IE 6]>

    I display an arrow when there is a sub-menu, the arrow bitmap toggles when a sub menu is selected.

    My general CSS is:
    .menu ul li:hover ul li a.drop {background:#0066CC url(../images/arrow.gif)
    99px 7px no-repeat; color:#FFFFFF; }

    .menu ul li:hover ul li a.drop:hover {
    background:#0066CC url(../images/arrow_roll.gif) 99px 7px no-repeat;}

    For IE 6 and 5.x I have defined:
    .menu ul li a:hover ul li a.sub {background:#0066CC url(../images/arrow.gif)
    99px 7px no-repeat;}

    .menu ul li a:hover ul li a.sub:hover {background:#0066CC
    url(../images/arrow_roll.gif) 99px 7px no-repeat;}


    3) Describe problem: The problem with IE 6/5.x is that the arrow_roll.gif never get displayed (however the arrow.gif get displayed). "sub" and "drop" are defined as classes.

    What I am doing wrong? Also I've noticed lots of flickers in IE 6/5.5 The dropdown tend to disappear sometimes. Any pointers?

    Thank you for your help.

    Eric

  2. #2
    Join Date
    Aug 2004
    Posts
    9,903
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Hmmm are you talking about a specific menu on DD? Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

  3. #3
    Join Date
    Dec 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks. Yes, sorry I forgot the script.
    The script I'm using is: http://www.dynamicdrive.com/style/cs...rizontal_menu/

    I've got everything working now for IE7 and IE 6 but in IE 5.5 only first level sub-menu shows up and in IE 5.01 only the main menu shows up. I'm getting less and less stuff :-)

    Here is my CSS when this statement is true <!--[if lte IE 6]>

    Code:
    .menu ul li a.drop, .menu ul li a:visited.drop {display:none;}
    .menu ul li a:hover ul li a.drop {display:none;} 
    .menu ul li a:hover {color:#000066; background:#0066CC;} /* main menu hover */
    
    /* display dropdown1 while Hover main menu */
    .menu ul li a:hover ul {display:block; visibility:visible; background-color:#0066CC;  position:absolute; top:35px; left:0; width:116px; border-right:1px solid #000066; border-bottom: 1px solid #000066; font-size:11px; line-height:20px; 
    height:20px; padding-left:2px;} 
    
    .menu ul li a span{
    float:left;
    display:block;
    padding: 0 12px 0 3px;
    }
    
    .menu ul li.current a, .menu ul li a:hover {background: url(../images/menu_hover_left.gif) no-repeat; background-position:left; 
    }
    
    .menu li.current a span, .menu ul li a:hover span{ background:url(../images/menu_hover_right.gif) no-repeat right top;}
    
    /*dropdown1 with sub menu2... doesn't work in IE 5.x */
    .menu ul li a:hover ul li a.sub {display:block; visibility:visible; 
    background:#0066CC url(../images/arrow.gif) 99px 7px no-repeat; } 
    
    .menu ul li a:hover ul li a.sub:hover {display:block; visibility:visible; 
    background:#0066CC url(../images/arrow_roll.gif) 99px 7px no-repeat;}
    
    .menu ul li a:hover ul li a ul {display:block; visibility:hidden; position:absolute; 
    height:0; width:0;}
    
    .menu ul li a:hover ul li a {display:block; background:#0066CC; color:#FFFFFF; 
    text-align:left; padding-left: 2px;
    width: 100px;  height:20px;  line-height:20px; 
    font-size:11px;  }
    
    /*selection menu item dropdown 1 and 2 */
    .menu ul li a:hover ul li a:hover {display:block;  background:#0066CC; color:#000066;} 
    
    /* dropdown menu 2....doesn't work in IE 5.x */
    .menu ul li a:hover ul li a:hover ul {display:block; visibility:visible; position:absolute; left:114px; top:0; 
    padding-left:2px;
    width:100px; 
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #000066;
    border-bottom: 1px solid #000066;
    border-left: 1px solid #FFFFFF;
    }
    
    .menu ul li a:hover ul li a:hover ul.left {left:-116px;}
    Thank you

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
  •