title: Magento: Custom menu extension - CSS to center menu
body: <p>I use <a href="http://www.magentocommerce.com/magento-connect/custom-menu.html" rel="nofollow">Custom Menu extension for Magento</a> but can't find out how to change custommenu.css to get the menu centered. This is a piece of code for menu:</p>
  
  <pre><code>&lt;div class="nav-container"&gt;
    &lt;div id="custommenu"&gt;
      &lt;div id="menu3" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" onmouseover="wpShowMenuPopup(this, 'popup3');"&gt;
      &lt;div id="popup3" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup3', 'menu3')" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" style="z-index: 9999;"&gt;
      &lt;div id="menu4" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" onmouseover="wpShowMenuPopup(this, 'popup4');"&gt;
      &lt;div id="popup4" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup4', 'menu4')" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" style="display: none; top: 25px; left: 77px; z-index: 10000;"&gt;
  ... rest of code...
  </code></pre>
  
  <p>And this is what I tried in CSS - text-align for #custommenu + display:inline-block for div.menu (and some other options too) but can't get it working:</p>
  
  <pre><code>#custommenu {
      position:relative;
      font-size: 14px;
      margin: 0 auto;
      padding: 0 16px;
      width: 918px;
      z-index: 999;
      text-align: center;    
  }
  div.menu {
      display:inline-block;
      float: left;
  }
  </code></pre>
  
  <p>Could you give me some hints how to get the menu centered? What am I doing wrong here?</p>