pure css dropdown menu with IE6 browser

Discussion in 'CSS' started by heroeff, Oct 6, 2008.

  1. #1
    I spent a few weeks on this and still don't find the solution (must precise it is my first website) :(. The menu below shows the sublists "sketches" and illustrations in Firefox browser when applying the mouse over the list item called "portfolio" but doesn't in IE6. :confused:
    I want this menu to be 100% CSS coded (no java script).
    Can someone help?


    HTML page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <title>Untitled Document</title>
    <link href="menustyle.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <div id="menu">
    <ul>
    <li><img src="images/home.gif" alt="home" /></li>
    <li><a href="#">Portfolio</a>
    <ul class="submenu">
    <li><a href="sketch.html">Sketches</a></li>
    <li><a href="illustrations.html">Illustrations</a></li>
    </ul>
    </li>

    <li><a href="profile.html">Profile</a></li>
    <li id="about"><a href="about.html">My Whereabout</a></li>
    <li><a href="contacts.html">Contacts</a></li>
    </ul>
    </div>
    </body>
    </html>

    CSS page:


    #menu {
    padding: 0;
    border:none;
    width:900px;
    height: 145px;
    margin: 0 auto;
    text-align: center;
    background-color:#000000;
    float:left;
    }

    #menu ul li {
    float:left;
    list-style-type:none;

    }

    #menu li a:link, #menu li a:visited, #menu li a:active {

    background-color: #000000;
    color:#9F9F9F;
    text-decoration:none;
    font-weight:normal;

    }
    #menu li a:hover {
    color:#ffffff;
    }
    #menu li ul.submenu {
    display:none;

    }
    #menu li:hover ul.submenu {
    display:inline-block;

    }
     
    heroeff, Oct 6, 2008 IP
  2. 007c

    007c Peon

    Messages:
    611
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    google csshover.htc
     
    007c, Oct 6, 2008 IP
  3. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    rikun, Oct 6, 2008 IP
  4. heroeff

    heroeff Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    thank you. I am sure that If i use your code to match my requirements, this will work.
    However I would like someone to tell me what is wrong in the codes above as it looks fine to me.

    Again, thank you for your help.
     
    heroeff, Oct 7, 2008 IP
  5. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I'm pretty sure it's because IE6 doesn't recognize li:hover. It only recognizes a:hover.

    I know in the code that I linked in my previous post has li:hover, but that's actually never used. It's because you make the link a block element and define a width and height. That way, if you hover over the li, then you're also hovering over the link, which then triggers the hover.
     
    rikun, Oct 7, 2008 IP
  6. heroeff

    heroeff Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    thank you for your answer Rikun. I was very optimistic about coding in CSS but realise this is not that simple, thanks to IE browsers. I am working from your code at the moment.
     
    heroeff, Oct 8, 2008 IP
  7. heroeff

    heroeff Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Rikun, I noticed that if i simply change the background color of some elements (can't remember which one) then the hover effect no longer works...isn't it a bit weird?
    try to change all the background color to black for example and you will see.:eek:
     
    heroeff, Oct 11, 2008 IP
  8. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    hmm...that is weird. However, I tried changing all the background colors to black and it still worked for me. Which browser did you notice this happen in?
     
    rikun, Oct 11, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Those tables are so nasty. They really are a last resort-- for those without JS who are also using IE6, it's still better to have those main-level links actually go to a page which shows all the sub-links. This makes your menu more accessible to keyboarders as well. Try keyboarding through that menu. Not everyone can use a mouse, just like not everyone has JS.

    The only times I hear of IE6 having issues with backgrounds, it's always related to Haslayout. Although there is another, kinda related thing IE sometimes has-- it needs a "trigger" sometimes to change display states.

    If you copy the dropdown code for the Sons of Suckerfish but not the Javascript that comes with it, it doesn't work in IE7 (even though IE7 doesn't need JS to hover over non-links). IE7 needs a "trigger", a little push, on the hover itself.

    #menu li:hover {
    say something here...
    }
    #menu li:hover ul {
    do whatever the hover was really supposed to do here;
    }

    Usually I use "visibility: visible;" because this doesn't change anything, but setting a background-color or changing the font-weight or anything does it too. I just usually don't want to change the way things look on :hover like that : )
     
    Stomme poes, Oct 12, 2008 IP
  10. wallzee

    wallzee Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I had the same problem few days ago, I used this example:
    http://www.cssplay.co.uk/menus/final_drop.html

    it's pure css with fixes for IE
     
    wallzee, Oct 13, 2008 IP
  11. katweb

    katweb Active Member

    Messages:
    74
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    50
    #11
    Stu Nicholls from cssplay also has some awesome menu demos on his main other site at http://www.stunicholls.com/

    I just found a great navigation menu to suit my current project and he only asks for his links to be left in the file and a donation.

    Scotty
     
    katweb, Nov 10, 2008 IP