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

Question

我正在尝试创建一个菜单，如下所示。当悬停菜单项时，它应该是从底部到顶部的高度动画。所以我将 anchor 标签定位为绝对，并给 bottom 0。当 anchor 标签定位为绝对时，它不能正确显示菜单。

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/

Answer 1

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

问题是因为 position:absolute对于李和position:relative宽度变为 0尝试为 li 添加 fixed with

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