Question

I have this jsfiddle and you can see the nav items are align to the left. Is there a way to center these items regardless of nav items, because I will have one more nav item when the user logs in…any ideas

Here is my html

<div id="cssmenu">
<ul>
  <li><a href="#"><span>Home</span></a></li>
  <li class="has-sub "><a href="#"><span>Products</span></a>
     <ul>
        <li class="has-sub "><a href="#"><span>Product 1</span></a>
           <ul>
              <li><a href="#"><span>Sub Product</span></a></li>
              <li><a href="#"><span>Sub Product</span></a></li>
           </ul>
        </li>
        <li class="has-sub "><a href="#"><span>Product 2</span></a>
           <ul>
              <li><a href="#"><span>Sub Product</span></a></li>
              <li><a href="#"><span>Sub Product</span></a></li>
           </ul>
        </li>
     </ul>
  </li>
  <li><a href="#"><span>About</span></a></li>
  <li><a href="#"><span>Contact</span></a></li>
 </ul>
 </div>​

Answer 1

If you want to make your and li are display:block (perhaps you want to give them same widths), you got the right idea with relative positioning, just add the following properties:

#cssmenu ul {
    left: 50%;
}
#cssmenu ul li{
    right: 50%;
}

If not, make your li simply display:inline removing all the other stuff and simply doing:

#cssmenu { text-align: center; }
#cssmenu ul { list-style: none; }
#cssmenu ul li { display: inline; }