css - 绝对定位的 anchor 标签在相对定位的锂内部不起作用

我正在尝试创建如下菜单。将鼠标悬停在菜单项上时，应设置从下到上的高度动画。因此，我将定位标记放置在绝对位置，并将底部设置为0。当定位标记放置在绝对位置时，它无法正确显示菜单。

css is as follows.
    #navigation
{
    position:relative;
    float:right;
    margin-top:55px;
    padding-right:45px;
}

#navigation ul
{
    text-decoration:none;
    list-style:none;
    display:inline;
    position:relative;
    padding:0px;
    height:30px;
    margin:0px;
}
#navigation ul li
{
    position:relative;
    float:left;
}
#navigation ul li a
{
    position:absolute;
    bottom:0px;
    padding:10px 5px;
    width:79px;
    display:block;
    text-decoration:none;
    background-color:#1c1c1c;
    color:rgb(255,255,255);
    /*margin:2px;
    margin-bottom:0px;*/
    text-align:center;
    font-family:Tahoma;
    /*position:relative;*/
    font-size:15px;

}

html如下。

<div id="navigation">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about-us.php">About Us</a></li>
        <li><a href="products.php">Products</a></li>
        <li><a href="contact-us.php">Contact Us</a></li>
    </ul>
</div>

http://jsfiddle.net/90up4hz2/

最佳答案

演示-http://jsfiddle.net/victor_007/90up4hz2/1/

问题是因为li和position:absolute的position:relative宽度变为0尝试为li添加固定

#navigation ul li {
    position:relative;
    float:left;
    height:30px;
    width:89px;
}

关于css - 绝对定位的 anchor 标签在相对定位的锂内部不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26560400/