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. 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; }
I've simplified the css for this from another site. Both can be found here: http://www.csswoes.com/2008/04/21/creating-drop-down-menus-with-only-css/ Works in most if not all browsers, including IE6. Hope this helps.
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.
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.
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.
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.
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?
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 : )
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
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