Css 绝对定位锚标签在相对定位的li内不工作

我正在尝试创建一个菜单，如下所示。悬停菜单项时，应设置从下到上的高度动画。所以我将锚定标记定位为绝对，并给出底部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>

我为您创建了这个，不要使用ulli，或者只是将下面的css添加到它们或任何对象中

.boxhead 
{    
color: #afaeae;
text-decoration: none;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background:#000000;
    padding-left:10px;
    padding-right:10px;
    height:50px;
}

.boxhead:hover 
{
color: #7d7d7d;
}

然后

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

</div>

演示-

该问题是因为li的

位置：绝对

和

位置：相对

宽度变为

0

请尝试为

li添加固定

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

请看我的答案这里是小提琴它会帮你很多