Simple Navigation

<style tyle="text/css">
#navigation {
   position: relative;
   width: 100%;
   background: #1E1E1E;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   box-shadow: inset 0 1px 0 #2E2E2E;
   -khtml-box-shadow: inset 0 1px 0 #2E2E2E;
   -webkit-box-shadow: inset 0 1px 0 #2E2E2E;
   -moz-box-shadow: inset 0 1px 0 #2E2E2E;
}

#navigation > div {
   width: 1000px;
   margin: auto;
   overflow: hidden;
}

#navigation > div > ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   float: left;
}

#navigation > div > ul > li {
   position: relative;
   display: inline-block;
   float: left;
   margin: 0;
   padding: 10px;
}

#navigation > div > ul > li:hover {
   background: #222;
}

#navigation > div > ul > li > a {
   color: #F5F5F5;
   text-decoration: none;
   text-transform: capitalize;
   font-size: 14px;
   font-family: helvetica,arial,verdana,sans-serif;
}
</style>



<div id="navigation">
   <div>

      <ul>
         <li><a href="#">home</a></li>
         <li><a href="#">gallery</a></li>
         <li><a href="#">about</a></li>
         <li><a href="#">message</a></li>
         <li><a href="#">videos</a></li>
         <li><a href="#">blog</a></li>
      </ul>

   </div>
</div>