Question

I have a website with a drop down navigation bar at the top, I would like to centre the navigation bar, but I can’t get it to work, it seems to be stuck to the left side. You can view the website here and I’ve pasted the code below.

I’ve been trying to get this to work all day, but I can’t see where the problem is. I don’t know what more to write, any help would be greatly appreciated.

My style.css:

#menu{
    position: absolute;
    z-index: 1;
    padding:0;
    margin: auto;
}
#menu ul{
    padding:0;
    margin:0;
    margin: auto;
    text-align: center;
    display: inherit;
}
#menu li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
}
#menu li a{
    width:100px;
    height: 30px;
    display: block;
    text-decoration:none;
    text-align: center;
    line-height: 30px;
    background-color: white;
    color: #7B99FF;
    font-size: 16px;
}
#menu li a:hover{
    color: #000;
}
#menu li .subnav a {
    color: #7B99FF;
    font-size: 13px;
}
#menu li .subnav a:hover{
    color: #000;
    font-size: 13px;
}
#menu ul ul{
    position: absolute;
    top: 30px;
    visibility: hidden;
}
#menu ul li:hover ul{
    visibility:visible;
}
.subnav {
    font-size: 13px;
}

My index.php:

<div id="menu">
<ul>
<li><a href="#nogo">About me</a>
</li>
<li><a href="#nogo">Categories</a>
<ul class="subnav">
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">Archive</a>
<ul class="subnav">
<li><a href="#nogo">Link 3-1</a></li>
<li><a href="#nogo">Link 3-2</a></li>
<li><a href="#nogo">Link 3-3</a></li>
</ul>
</li>
<li><a href="#nogo">Contact</a>
</li>
</ul>
</div>

Answer 1

Remove the ‘absolute’ position of #menu and give it some width:

#menu{
width:400px;
z-index: 1;
padding:0;
margin: auto;}

If you don’t want to set width manually you can wrap your root in a div with style:

text-align:center