Question

My CSS UL menu doesn’t seem to want to centre, any ideas? I have pasted the code below for your review, I am quite new to CSS so your help is greatly appreciated 🙂

The only way I have been able to centre it is by fixing the width and using the html centre tags but I need the menu to be at 100% for expansion and I need to to automatically centre.

The CSS

#menu{
    width:100%;
    margin: 0;
    padding: 5px 0 0 0;
    list-style: none;
    background-color:#333333;
    text-align:center;
}

#menu li{
    float: left;
    padding: 0 0 5px 0;
    position: relative;
    list-style:none;
    margin:auto;
}

#menu ul{
        list-style:none;
        display:inline;
        margin: 0;
        padding: 0;
        text-align: center;
}

#menu a{
    float: left;
    height: 15px;
    padding: 0 25px;
    color:#FFF;
    text-transform: uppercase;
    font: 10px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 0px 0 #000;
}


#menu li:hover > a{
    color:#F90;

    font: bold 10px/25px Arial, Helvetica;
}

*html #menu li a:hover{ /* IE6 */
    color: #F06;
}

#menu li:hover > ul{
    display: block;
}

Thanks again 🙂

Answer 1

Provide width to your menu and use margin: auto;

#menu{
    width:300px; <--------Here
    margin: 0 auto; <-----Here
    padding: 5px 0 0 0;
    list-style: none;
    background-color:#333333;
    text-align:center;
}

Moreover why are you doing this?

#menu li:hover > ul{
    display: block;
}

And also this

#menu a{
    float: left;
    ....
}

Update: just read all the styles your cascade looks pretty messed up, use the following

#menu { /* I Assume this ID is applied to <ul> element */
    width:/*Whatever you want to define*/;
    margin: 0 auto; <---Change Here
    padding: 5px 0 0 0;
    list-style-type: none;  <---Change Here
    background-color:#333333;
    text-align:center;
}

#menu li{
    float: left; <---You don't need this
    padding: 0 0 5px 0;
    position: relative; <---You don't need this too
    list-style:none; <---You don't need this too
    margin:auto; <---You don't need this too
}

/* Take out this entirely from here */
#menu ul{
        list-style:none;
        display:inline;
        margin: 0;
        padding: 0;
        text-align: center;
}
/* till here */

#menu a{
    float: left; <---You don't need this
    height: 15px;
    padding: 0 25px;
    color:#FFF;
    text-transform: uppercase;
    font: 10px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 0px 0 #000;
}


#menu li:hover > a{
    color:#F90;

    font: bold 10px/25px Arial, Helvetica;
}

*html #menu li a:hover{ /* IE6 */
    color: #F06;
}

#menu li:hover > ul{
    display: block;
}

And if you want your links inside the menu too be centered simply use this

HTML

<ul id="#menu">
  <li></li>
</ul>

CSS

#menu li {
  text-align: center;
}