centering <ul> <li> horizontal drop down menu

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 :)

Answer 2

I've had many problems with this but I finally found a solution one day. It was the use of a table and css auto margins. Here is my trick. Just change the width in the center td and add the navigation.

<table>
<td style="margin:0 auto;">
</td>
<td width="800"> <----Change this to the width of your nav bar.

PUT THE NAVIGATION HERE

</td>
<td style="margin:0 auto;">
</td>
</table>

Answer 3

From what I understand, you shouldn't be nesting block level elements inside inline elements. That being said, I've created this JSFiddle solution by simplifying your HTML and replacing the <div> that holds the "Content" with a sub un-ordered list instead. (In theory, this sublist, which has just one <li>, should be able to then hold the <div> with the content if you so desire.)

The HTML is thus:

<ul id="menu">
    <li>Home
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>One day
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>I wish to
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>Be in the
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>Centre of this page
        <ul>
            <li>Content</li>
        </ul>
    </li>
</ul>​

And the CSS was set like so:

#menu {
    text-align: center;
    height: 30px;
}

#menu li {
    list-style: none;
    display:inline-block;
    margin: 5px 15px;
}

#menu li ul {
    display: none;
}

#menu li:hover ul {
    display: block;
    position: absolute;
    top: 30px; /* height of menu */
    left: 25px;
    right: 25px;
}

In the JSFiddle I've added some colors to make it obvious what element is where. I've also stripped out the animation CSS that you had in your live example as well, but that should be simple to slip back in.

This method relies on giving the menu an absolute height -- in this example 30px -- and then absolutely positioning the "content" <div> that appears on hover below it with top: 30px (or whatever the menu height happens to be).