Как отобразить пункты меню в верхней части гиперссылки

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.Если это так, и вы хотите, чтобы меню отображалось вверх, вам нужно указать атрибут bottom как 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;}