Question

I am trying to center an li under a previous li for a drop down menu. The best thing I could come up with is to use a negative margin to move the list to the left, but this doesn’t work uniformly. Any ideas?

#navigation {
    height: 50px;
    width: 960;
}
#navigation ul li {
    display: block;
    float: left;
    padding: 0 40px;
}
#navigation ul li ul {
    display:none;
    width: 240px;
}
#navigation li:hover ul {
    display:block;
    position: absolute;
    margin: 0 0 0 -35px;
    padding: 0;
}

Answer 1

In your case, you’ll need to add position:relative for the #navigation ul li, and then position the #navigation li:hover ul using the

left: 50%;
margin-left: -52px;

Doing so, you’d, at first, position the ul to the half of the parent li and then would move it to the left according to it’s dimensions.