How to recalculate correct position

Question

I think I am been misunderstood here so I will rephrase my question.
THE PROBLEM: when I \"hover\" over the menu the black span with class \"problem\" follows

Answer 1

I'd start by updating the .menu styles thusly:

float: none;
width: 715px;
height: 30px;
display: block;
position: relative;
margin: 9px auto;

You'll then need to move the active element behind it, which you can possibly do by applying a negative top-margin

Answer 2

Set the CSS of the menu div to:

width://insert wanted width here
margin:auto;

With a fixed width and auto margin, CSS will center your div.