michaellunsford Posted February 6, 2007 Share Posted February 6, 2007 wow, what a beating. the ul.menu li:hover > ul { display:block } works on the tutorial site, but not in my code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test Page</title> <style type="text/css"> ul.menu * { padding-left:0px; } ul.menu { width:110px; height:35px; font:13px Arial; position:relative; } ul.menu li { width:105px; position:relative; list-style-type: none; border: 2px solid #775841; background:#FFC; border-width: 1px 2px 1px 2px; padding-top:4px; padding-bottom:2px; text-align:center; } ul.menu ul { position:absolute; display:none; } ul.menu li:hover > ul { display:block; } ul.menu li a { text-decoration:none; color:#775841; display:block; } ul.menu li:hover, ul.menu li:hover a { color:#FFF; background:#000; } </style> </head> <body> <div> <ul class="menu"> <table><tr><td> <li><a href="Welcome">Welcome</a></li> <ul> <li><a href="test1">welcome1</a></li> <li><a href="test2">welcome2</a></li> <li><a href="test3">welcome3</a></li> <li><a href="test4">welcome4</a></li> <li><a href="test5">welcome5</a></li> </ul></td> <td><li><a href="Coming Soon">Coming Soon</a></li> <ul> <li><a href="test1">coming soon1</a></li> <li><a href="test2">coming soon2</a></li> <li><a href="test3">coming soon3</a></li> <li><a href="test4">coming soon4</a></li> <li><a href="test5">coming soon5</a></li> </ul></td></tr></table> </ul> </div> <div> testing menu should cover this text without moving it. </div></body> </html> Quote Link to comment Share on other sites More sharing options...
Jtech Posted February 6, 2007 Share Posted February 6, 2007 what browser are you useing ,cause the child selector/decendents... code your using only works in netscape like the child selectors Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted February 6, 2007 Author Share Posted February 6, 2007 the template site (link provided in original post) works in Camino, Firefox, Flock, Mozilla, Opera, Safari, and SeaMonkey on Mac. It reportedly works on IE 7 (but I haven't gotten that far yet). This is my first attempt at this, so if there's a better way to do it, I'm interested. Thanks! Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted February 6, 2007 Author Share Posted February 6, 2007 the table is the wrench in the works. I can do it without nesting the whole thing. Now I just need to figure out how to make the rows a little closer together. Does it work in whatever browser you're using? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test Page</title> <style type="text/css"> ul.menu * { padding-left:0px; } ul.menu { width:110px; height:35px; font:13px Arial; position:relative; } ul.menu ul { position:absolute; display:none; } ul.menu:hover > ul { display:block; } ul.menu li a { text-decoration:none; color:#775841; display:block; } ul.menu li:hover, ul.menu li:hover a { color:#FFF; background:#000; } ul.menu li { width:105px; position:relative; list-style-type: none; border: 2px solid #775841; background:#FFC; border-width: 1px 2px 1px 2px; padding-top:4px; padding-bottom:2px; text-align:center; } </style> </head> <body> <div> <table cellpadding="0" cellspacing="0"><tr><td> <ul class="menu"> <li><a href="Welcome">Welcome</a></li> <ul> <li><a href="test1">welcome1</a></li> <li><a href="test2">welcome2</a></li> <li><a href="test3">welcome3</a></li> <li><a href="test4">welcome4</a></li> <li><a href="test5">welcome5</a></li> </ul> </ul></td> <td> <ul class="menu"> <li><a href="Coming Soon">Coming Soon</a></li> <ul> <li><a href="test1">coming soon1</a></li> <li><a href="test2">coming soon2</a></li> <li><a href="test3">coming soon3</a></li> <li><a href="test4">coming soon4</a></li> <li><a href="test5">coming soon5</a></li> </ul> </ul> </td></tr></table> </div> <div> testing menu should cover this text without moving it. </div></body> </html> Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted February 7, 2007 Author Share Posted February 7, 2007 getting reports that it doesn't work in IE 6 (but works fine in IE7). Groan, looks like a job for javascript sniffer. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.