Forums

al_m473


<!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></title>
<style type=\"text/css\">
body {font-size: 0.85em; font-family: Verdana, Arial, Helvetica, sans-serif;}
#nav, #nav ul {margin: 0; padding: 0; list-style-type: none; list-style-position: outside; 
   position: relative; line-height: 1.5em;}
#nav a {display: block; padding: 0px 5px; border: 1px solid #333; color: #fff; 
   text-decoration: none; background-color: #333;}
#nav a:hover {background-color: #fff; color: #333;} 
#nav li {float: left; position: relative; margin-right: 30px;}
#nav ul {position: absolute; display: none; width: 12em; top: 1.5em;}
#nav li ul a {width: 12em; height: auto; float: left;}
#nav ul ul {top: auto;}	
#nav li ul ul {left: 12em; margin: 0px 0 0 10px;}
#nav li:hover ul ul, 
#nav li:hover ul ul ul, 
#nav li:hover ul ul ul ul {display:none;}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul {display:block;}
</style>
</head>
<body>
   <ul id=\"nav\">
      <li><a href=\"#\">1 HTML</a></li>
      <li><a href=\"#\">2 CSS</a>
         <ul>
            <li><a href=\"#\">CSS Tools</a>
         </ul>
      </li>   
      <li><a href=\"#\">3 Javascript</a>
         <ul>
            <li><a href=\"#\">3.1 jQuery</a>
               <ul>
                  <li><a href=\"#\">3.1.1 Download</a></li>
                  <li><a href=\"#\">3.1.2 Tutorial</a></li>
               </ul>
            </li>
            <li><a href=\"#\">3.2 Mootools</a></li>
            <li><a href=\"#\">3.3 Prototype</a></li>
         </ul>
      </li>
   </ul>
</body>
</html>

I have built a multi-level dropdown menu using this example from the CSS Tricks article (June 24, 2008)
Dropdown Menu: Start with CSS, Improve with jQuery.

How do I center the navigation buttons?

I can center them with padding-left on the ID menu but this may not be the best way to do it, I don't know.
Trying to center them by setting id:menu to "text-align: center;" or "margin: 0 auto;" does not seem to
work. One of the side effects of trying to use "text-align: center;" is that the words in the dropdowns are
centered and this I do not want.

I have tested this page in IE7 and FF2 and have dropped the links to the jQuery and js files to increase
the portability of the code, these seem to only apply if using IE6 and should have no bearing on the
question of how to center the navigation buttons.

Al

treehouse : what would you like to learn today?

Forums

Multi-level Dropdown Menu