我有一个超链接。将鼠标放在它上面我在底部显示菜单。我想在顶部显示菜单。底部的菜单显示正常。我必须在顶部显示。如何以这种方式显示风格,我可以在顶部显示。
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>
这为超链接提供了一个下拉菜单,但它显示在底部。现在我需要在超链接的顶部显示菜单。
答案 0 :(得分:2)
认为你的菜单高度是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;
}
答案 1 :(得分:0)
好的,所以我假设你在或不position:relative
的容器中有这个菜单。如果是这种情况并且您想要向上显示菜单,则需要将底部属性指定为100%。
你也需要为此制作一个容器
<强> 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;}