CODEWITHSUNDEEP
htmlcsshtml-lists
lambgrp425
lambgrp425

Reputation: 706

CSS - Centering li under previous li

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;
}

Upvotes: 0

Views: 170

Answers (2)

kizu
kizu

Reputation: 43234

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.

Upvotes: 2

Shalini Subramani
Shalini Subramani

Reputation: 502

Try this coding:

#navigation ul li {
    border: 1px solid black;
    display: block;
    float: left;
    padding: 0 30px;
    width: 80px;
}

Upvotes: 0

Related Questions