Hi All, I have a menu in CSS that work good in FireFox but not in IE7 any help please? Below please find CSS & HTML + link Thanks in advance, Ziffa27 Link: http://andrewcallus.brinkster.net/test_menu/test_menu.html <!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> <style type="text/css"> <!-- html, body, ul, li, container, header, menu, menu-nav, submenu { margin: 0; padding: 0; } body { margin: 0; padding: 0; background: #9F4343; margin-top: 30px; color: #000000; font-family: Arial; font-size: 11px; font-weight: normal; text-align: left; } h1 { padding: 40px; font-size: 2.7em; font-weight: 100; } #container { width: 980px; margin: auto; height: 685px } #header { background-color: #FF6600; height: 280px; } #menu { background-color: #339900; /*mid colour (menu) */ width: 215px; height: 380px; float: left; } #menu-nav { background-color: #99FF00; /*light colour*/ margin-top: 60px; float: left; width: 215px; } #menu-nav ul { list-style: none; } #menu-nav li { float: left; font-size: 14px; letter-spacing: 0.4px; border-top: 1px solid #99FF00; /*light colour*/ border-bottom: 1px solid #003300; /*dark colour*/ } #menu-nav li a { padding-top: 4px; padding-bottom: 1px; padding-left: 30px; background-color: #339900; /*mid colour (menu) */ color: #000000; text-decoration: none; display: block; width:185px; height: 20px; } #menu-nav li a:hover { color: #339900; background: url(arrow.gif) no-repeat 0 8px; } #menu-nav ul li.current a { background: url(arrow.gif) no-repeat 0 8px; } #menu-nav ul li.current a:hover { background: url(arrow.gif) no-repeat 0 8px; } #menu-nav ul li.current_top a { background: #99FF00; /*light colour (menu) */ } #submenu li a { padding-top: 4px; padding-bottom: 1px; padding-left: 60px; width:155px; } --> </style> </head> <body> <div id="container"> <div id="header"> <h1>Project Sub 2</h1> </div> <div id="menu"> <div id="menu-nav"> <ul> <li><a href="#">Home</a></li> <li class="current_top"><a href="#">Project</a></li> <div id="submenu"> <ul> <li><a href="#">Project Sub 1</a></li> <li class="current"><a href="#">Project Sub 2</a></li> <li><a href="#">Project Sub 3</a></li> </ul> </div> <li><a href="#">About Us</a></li> <li><a href="#">Etc</a></li> <li><a href="#">Etc</a></li> </ul> </div> </div> </div> </body> </html> Code (markup):
have you consider giving a color to the submenu div by exaple #submenu{background-color:#339900;} and then to the current class #submenu .current{background-color:#99FF00} or something like that. you could also put it here #menu-nav ul li.current_top a, #menu-nav ul li.current_top #submenu .current {