The centering bit is easy. In the html you create a <div class="center"> and place it surrounding the menu, like this:
<div class="center">
<ul class="menu-menu">
<li class="first"><a href="http://">Untitled1</a></li>
<li><a href="http://">Untitled2</a></li>
<li><a href="http://">Untitled3</a></li>
<li><a href="http://">Untitled4</a></li>
<li><a href="http://">Untitled5</a></li>
<li><a href="http://">Untitled6</a></li>
<li><a href="http://">Untitled7</a></li>
</ul>
</div>
In the menu-menu.css create a .center:
.center {
width:700px;
margin: auto;
height: 50px;
border: 1px solid yellow;
}
You have to adjust the width to fit your own menu. The height and border are just in there to make it easier to find the right width. They can be deleted when you have got it the way you want.
Regarding the other problem, I'll have to look through the code when I'm awake enough. Right now it is nearly 02 at night, so that will have to be tomorrow.