如何在超链接顶部显示菜单项

Question

我有一个超链接。将鼠标放在它上面时，我会在底部显示菜单。我想在顶部显示菜单。底部的菜单显示良好。我必须显示在顶部。如何以我显示在顶部的方式更改样式。

CSS：

.menudiv{
    position:absolute;  
    top: -10px; 
    border: 1px solid #BBB; 
    border-bottom-width: 0;
    font:normal 11px Verdana;
    line-height:10px;
    z-index:100;
    background-color: white;
    width: 75px;
    visibility: hidden; 
}

HTML：

<div id= "menu3" class="menudiv">
    <a href ="test.php">test1</a>
    <a href ="test1.php">test2</a>
</div>
<a href ="#" rel ="menu3">menu1</a>

这为超链接提供了一个下拉菜单，但它显示在底部。现在我需要在顶部显示超链接的菜单。

Answer 1

认为你的菜单高度是 40px；所以你可以为此设置 .menudiv 的底部；看：

.menudiv{
    position:absolute;  
    /* top: -10px; */
    bottom: 40px; /*  here you must set the bottom attribute, instead of top attr */
    border: 1px solid #BBB; 
    border-bottom-width: 0;
    font:normal 11px Verdana;
    line-height:10px;
    z-index:100;
    background-color: white;
    width: 75px;
    visibility: hidden; 
}

Answer 2

好吧，我假设您在 position:relative 的容器中拥有此菜单。如果是这种情况，并且您想向上显示菜单，则需要将底部属性指定为 100%。 或不指定，

您还需要为此创建一个容器

http://jsfiddle.net/wbVLF/

HTML：

<div class="menuContainer">
    <div id= "menu3" class="menudiv">
        <a href ="test.php">test1</a>
        <a href ="test1.php">test2</a>
    </div>
    <a href ="#" rel ="menu3">menu1</a>
</div>

CSS：

.menudiv{
    position:absolute;  
    top: -10px; 
    border: 1px solid #BBB; 
    border-bottom-width: 0;
    font:normal 11px Verdana;
    line-height:10px;
    z-index:100;
    background-color: white;
    width: 75px;
}

.menuContainer{position:relative;}