Question

我正在尝试按如下方式创建菜单。当悬停菜单项时，它应该是从下到上的高度动画。所以我将锚标记置于绝对位置并给出底部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/

Answer 1

http://jsfiddle.net/L0r493ag/2/

我为你创建了这个，不要使用ul li或只是将跟随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>

Answer 2

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

问题是由于position:absolute为position:relative而0宽度变为li尝试添加固定为#navigation ul li { position:relative; float:left; height:30px; width:89px; }

{{1}}

绝对定位的锚标签位于相对定位的李不工作

2 个答案: