Question

I have a hyperlink .On putting the Mouse over it Iam displaying the menu in the bottom . I want to display the Menu over the top.The menu at the bottom is displaying fine. I have to display on top.How can ichange the style in such way i display on top.

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>

This providdes a drop down menu for hyperlink but it is displaying at bottom.Now i need to display the menu on top for the hyperlink.

Answer 1

think your menu height is 40px; so you can set the bottom of .menudiv for this; look:

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