html - 尝试内联菜单

Question

我正在尝试使用 CSS 制作一个简单的菜单，水平对齐 5 行。

这是我的基本代码:http://jsfiddle.net/LVCkp/

HTML

<div class="container clearfix">
    <!-- Conteúdo -->
    <div id="menu">
        <!-- Menu da página -->
        <div class="nav">
            <ul>
                <li><a href="#main">Principal</a>

                </li>
                <li><a href="#corte">Cortes</a>

                </li>
                <li><a href="#equipa">Equipa</a>

                </li>
                <li><a href="#sobre">Sobre Nós</a>

                </li>
                <li><a href="#contacto">Contatos</a>

                </li>
            </ul>
        </div>
        <!-- Fim class nav -->
    </div>
    <!-- Fim ID menu -->

CSS

    body{
    width: 100%;
    display: block;
    margin: 0 auto;
}

body {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.container {
    width: 1024px;
}

a {
    text-decoration: none;
}

#menu{
    background-color: #000000;
    position: fixed;
    width: 100%;
    height: 100px;
    line-height: 5px;
    font-weight: bold;
    font-size: 12px;
}

#menu ul{
        margin-top: 50px;
}

#menu li {
    text-decoration: none;
    list-style: none;
    padding: 5px 10px 50px 10px;
    display: inline;
}
#menu li a:hover {
    background-color: green;
    padding: 50px 15px 5px 15px;
    color: black;
}
#menu a {
    color: white;
    text-transform: uppercase;
}

问题:我无法将菜单链接居中，也无法将它们置于黑条的中间(水平对齐)。

有人可以帮忙吗？

编辑:我设法让它变得更好，但问题是:我无法分离菜单链接，所以当我们将鼠标悬停在上面时它们不会移动

Answer 1

http://jsfiddle.net/LVCkp/3/我使用固定 margin 来实现头寸。

#menu ul{

    line-height: 5px;
    font-weight: bold;
    font-size: 12px;
    margin-top: 70px;
    margin-left: 70px;
}