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> Link to comment https://forums.phpfreaks.com/topic/37266-css-popup-menus/ 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 Link to comment https://forums.phpfreaks.com/topic/37266-css-popup-menus/#findComment-178165 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! Link to comment https://forums.phpfreaks.com/topic/37266-css-popup-menus/#findComment-178178 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> Link to comment https://forums.phpfreaks.com/topic/37266-css-popup-menus/#findComment-178214 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. Link to comment https://forums.phpfreaks.com/topic/37266-css-popup-menus/#findComment-178734 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.