stuck on this menu, cant centre it. anyone help out

I have a menu here setup I cant seem to centre it in the screen, its always on the left side.
anyone know how I can centre it?
Also the long menu item in there, is there a way to adjust the width of the cells to be able to cater for this longer item as well automatically or not? would like to ideally have the menu cover 100% of the screen and be responsive and as it gets smaller it reduces in width.

[jsfiddle.net...]


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
.menu {
    background-color:#05BB74;
  }
.menu:after {
    content:'';
    display:block;
    clear:both;
  }
ul.slimmenu {
    position:relative;
    float:right;
    right:50%;
    list-style-type:none;
    margin:0;
    padding:0;
  }
ul.slimmenu li {
    position:relative;
    float:left;
    left:50%;
    text-align:center;
/*menu drop down part back ground colour */
    background-color:#05BB74;
  }
ul.slimmenu > li { 
    margin-right:-5px; 
/* line between buttons colour */
    border-left:1px solid #cfc 
}
ul.slimmenu > li:first-child { 
    border-left:0;
  }
ul.slimmenu > li:last-child { 
    margin-right: 0;
  }
ul.slimmenu li a {
    display:block;
    text-decoration:none;
/* menu item text colour */
    color:#fff;
/* this adjusts each menu rectangle area top, right, bot, left */
    padding:5px 12px 5px 10px;
    font-family:'Open Sans', sans-serif;
    font-size:13px;
    font-weight:400;
/* shadow of menu items */
    text-shadow:0 1px 0 rgba(255,255,255,0.2);
    transition:background-color 0.5s ease-out;
    -o-transition:background-color 0.5s ease-out;
    -moz-transition:background-color 0.5s ease-out;
    -webkit-transition:background-color 0.5s ease-out;
    margin:0 auto;
  }
ul.slimmenu li a:hover {
/*mouse over menu BG colour */
    background-color:#cfc;
    text-decoration:none;
    color:#000;
  }
</style>

</head>
<body>

<div class="menu">
  <ul id="navigation" class="slimmenu">
    <li><a href="#">aaaa</a></li>
    <li><a href="#">bbbbb</a></li>
    <li><a href="#">this is a menu item</a></li>
    <li><a href="#">uuuuu</a></li>
    <li><a href="#">iiiiiiiiiiiiii</a></li>
    <li><a href="#">oooooo</a></li>
  </ul>
</div>

</body>
</html>

stuck on this menu, cant centre it. anyone help out

TheIceman5

birdbrain

TheIceman5

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week