right this is my html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="menu_style.css" type="text/css" media="screen" /> </head> <body> <br> <br> <center> <ul id="menu"> <li><a href="#" title="" class="current">Home</a></li> <li><a href="#" title="">Products</a></li> <li><a href="#" title="">Contact</a></li> <li><a href="#" title="">Label 4</a></li> <li><a href="#" title="">Label 5</a></li> </ul> <ul id="enu"> <li><a href="#" title="">Home</a></li> <li><a href="#" title="">Products</a></li> <li><a href="#" title="">Contact</a></li> <li><a href="#" title="">Label 4</a></li> <li><a href="#" title="">Label 5</a></li> </ul> </body> </html> HTML: and this is my css ul#menu { width: 60%; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; } ul#menu li { display: block; float: left; margin: 0 0 0 0; } ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; } ul#menu li a:hover { color: #333; } ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 0px 15px 0; } ul#enu { width: 60%; height: 25px; background: #FFF url("images/bottom2.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; } ul#enu li { display: block; float: left; margin: 5px 0 0 0; } ul#enu li a { height: 0px; color: #FFF; text-decoration: none; display: block; float: left; padding: 0px 0px 10px 10px; } ul#enu li a:hover { color: #333; } HTML: can anyone help me, because my submenu links keep aligning to the right, no idea why...
Add overflow:hidden; to the menu list. That makes a container expand to contain the floated elements inside it. You can also fix it by reducing the height of the menu anchors. That seems to be keeping the lower ones from moving across.
Get rid of the <center> dude. Here's my way of creating a dropdown CSS menu that works on all browsers (not ie6 ofc). Make container for menu, usually spanning the full width of your page. #menu { background: #000033; width: 980px; height: 43px; margin: 0px auto 0px; padding: 0px 0px 0px 0px; overflow: hidden; float: left; } Code (markup): Style the UL list: #nav { font-size: 12px; font-family: Arial, san-serif; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #nav ul { list-style: none; margin: 0px; padding: 0px; } Code (markup): Now style the LI elements: #nav li { float: left; list-style: none; margin: 0px; padding: 0px; } #nav li a, #nav li a:link, #nav li a:visited { color: #ffffff; display: block; font-weight: bold; text-decoration: none; margin: 0px 0px 0px 0px; padding: 13px 11px 14px 11px; } #nav li a:hover, #nav li a:active { background: #0000cc; color: #ffffff; display: block; font-weight: bold; text-decoration: none; margin: 0px 0px 0px 0px; padding: 13px 11px 14px 11px; } Code (markup): Now it's the dropdowns turn: #nav li li a, #nav li li a:link, #nav li li a:visited { background: #040436; color: #DDE2F0; width: 150px; float: none; font-size: 10px; text-transform: none; margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-decoration: none; } #nav li li a:hover, #nav li li a:active { color: #ffffff; padding: 4px 10px 4px 10px; text-decoration: underline; } #nav li { float: left; padding: 0px; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 174px; margin: 0px; padding: 0px; } #nav li li { } #nav li ul a { width: 140px; } #nav li ul a:hover, #nav li ul a:active { } #nav li ul ul { width: 174px; margin: -24px 0 0 167px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; } Code (markup): The HTML: Just make a standard list like: <div id="menu"> <ul id="nav"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a> <ul> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> </div> Code (markup):