tinfanide Posted April 6, 2011 Share Posted April 6, 2011 As stated, I was really desperate with it. Please help if you know why.Why the second subheading of the lis does not show up but the first does?Because of z-index? <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><style>ul { margin:0; padding:0;}ul li { margin:0; padding:0; list-style:none; width:100px; border:1px solid black; position:relative; z-index:1;}ul li ul li { position:absolute; background-color:#00F; visibility:hidden; z-index:2;}ul li:hover ul li { visibility:visible;}</style><body><ul> <li>Heading</li> <ul> <li>Subheading</li> <li>Subheading</li> </ul> <li>Heading</li> <ul> <li>Subheading</li> <li>Subheading</li> </ul></ul></body></html> The second one is more weird...strange, to the best of my knowledge...The list Software under list Home did show up and was over the list Contact in Firefox yet not in IE7. Why?Z-index again?Many thanks for your help! <style>ul { padding:0; margin:0; position:relative; z-index:1; }ul li { width:150px; height:30px; background-color:#F90; list-style:none; text-align:center; position:relative; padding:0; margin:0; z-index:1; }ul li a { text-decoration:none; color:#FFF; font-weight:bold; font-size:20px; line-height:30px; position:relative; z-index:1; }ul li ul { padding:0; margin:0; visibility:hidden; z-index:1;}ul li ul li { padding:0; margin:0; z-index:1; }ul li ul li a { z-index:1; }ul li:hover { z-index:1000; }ul li:hover ul { visibility:visible; z-index:1000; }ul li:hover ul li { background-color:#000; z-index:1000;}ul li:hover ul li a { background-color:#000; z-index:1000;}</style><ul> <li><a href="http://www.google.co.uk/">Home</a> <ul> <li><a href="http://www.google.co.uk/">Software</a></li> <li><a href="http://www.google.co.uk/">Documents</a></li> <li><a href="http://www.google.co.uk/">Music</a></li> </ul> </li> <li><a href="http://www.google.co.uk/">Contact</a> <ul> <li><a href="http://www.google.co.uk/">Staff</a></li> <li><a href="http://www.google.co.uk/">Help</a></li> <li><a href="http://www.google.co.uk/">Suggestions</a></li> </ul> </li> </ul> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.