CSS - 以李先生为中心

Question

我正在尝试将li放在前一个li下面，以获取下拉菜单。我能想到的最好的事情是使用负边距将列表向左移动，但这不能均匀地工作。有什么想法吗？

http://empact.mcallinder.com/empact.php

#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

在您的情况下，您需要为position:relative添加#navigation ul li，然后使用

定位#navigation li:hover ul

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

这样做，您首先会将ul定位到父li的一半，然后根据它的尺寸将其移到左侧。

Answer 2

试试这个编码：

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