Question

I’ve been unable to center this horizontal list drop down menu. Will I have to rework all the css because i’m using a float left?

Here is all the code pertaining to the position of the list.
or alternatively click here to view it live

.megamenu {
margin:auto;
position:absolute;
margin:0;
width:100%;
font-size:1.182em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
border-right: none;
top: -1px;
list-style-type:none;
list-style-position:inside;




.megamenu > li {

    display:inline;
    border:none;
    margin:0;
    float:left;
    padding: 0px 0 0px 30px;
    -webkit-transition: background-color 0.4s ease-out;
    -moz-transition: background-color 0.4s ease-out;
    -o-transition: background-color 0.4s ease-out;
    -ms-transition: background-color 0.4s ease-out; 
    border-right: none;
    transition: background-color 0.4s ease-out;

}

any help would be greatly appreciated

Answer 1

There are lots of different ways to do this – you’ll need to give it a width, though, instead of 100%. Is that ok?

Then with a width in place, you can use display:inline on the ul, and text-align:center on the parent div, or maybe use margin:auto.

If this doesn’t help, let me know, I will make a fiddle for you 🙂