problem with horizontal drop down menu

Discussion in 'CSS' started by clouting, Nov 20, 2007.

  1. #1
    hey folks.......

    have created a horizontal drop down menu for my site. All seems fine except the drop downs disappear when im viewing it in IE. i have used a bug fix which looks like this.

    
    * html ul li { float: left; }
    * html ul li a { height: 1%; }
    
    Code (markup):
    however it is still very "buggy" in IE. any ideas why this is happening? is CSS the best way to create a drop down menu?

    regards.........
     
    clouting, Nov 20, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Dan Schulz, Nov 20, 2007 IP
  3. clouting

    clouting Guest

    Messages:
    120
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks for reply,

    ok so i need add the Javascript as an additional bug fix

    cheers.
     
    clouting, Nov 21, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Also, you are likely to have problems in IE with the float being on the LI - that's the LAST place you want it as floating LI's have wierd behaviors all around. The LI should probably be inline, with the anchor itself floating... in which case you might not even NEED the haslayout.
     
    deathshadow, Nov 23, 2007 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Huh? I've heard just the opposite-- when people are having problems and using display: inline, they're told to remove that and float the li's. I've never heard of floating the anchors. What does that give you compared to floating the li's?
     
    Stomme poes, Nov 24, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    less code, fewer chances of tripping hasLayout, and it also makes the anchor act like a block-level element that can also wrap around its content rather than take up every possible centimeter of real estate
     
    Dan Schulz, Nov 24, 2007 IP
  7. flakdesign

    flakdesign Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Have you tried css drop down menus from cssplay.co.uk.
     
    flakdesign, Nov 24, 2007 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    They (ab)use invalid HTML (even though it's hidden by conditional comments), flakdesign.
     
    Dan Schulz, Nov 24, 2007 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Dan, can you point me to a menu that's using the anchor float instead of the li float? I usually display:block my anchors anyway so the hover fills the whole li (and the clickable area is full, and more control over padding/spacing...), so that effect I'm happy with.
     
    Stomme poes, Nov 25, 2007 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I've tried making one that uses the float on the anchor with the list item inline before, but haven't had much luck. I can probably give it another spin though if you want.
     
    Dan Schulz, Nov 25, 2007 IP