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;}

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

2 个答案: