开发者

CSS: Dropdown float on top

So i have this dropdown made in html/css/js.. it slides down on mouseover, but right now it slides down wrong, i mean it moves my text down which i dont want it to do.. i want it to like float over it so the text is behind the menu that comes down

  • At left its how it is, and on right side its when mouse over. and as you can see the开发者_如何转开发 "example me" text i dont want it to move down like that, i want the menu to like float on top so when you move away your mouse again you can see "example me"

    Here's my css for the menu:

    .menu_class {
        border:1px solid #1c1c1c;
    }
    
    .the_menu {
        display:none;
        width:150px;
        border: 1px solid #1c1c1c;
    }
    
    .the_menu li {
        background-color: #283d44;
    }
    
    .the_menu li a {
        color:#FFFFFF; 
        text-decoration:none; 
        padding:10px; 
        display:block;
    }
    
    .the_menu li a:hover {
        padding:10px;
        font-weight:bold;
        color: #fffc30;
    }
    
    <img src="images/button.png" width="126" height="23" class="menu_class">
    <ul class="the_menu">
    <li><a href="#">Profil</a></li>
    
    </ul>
    


    To have it positioned on top of other elements, you need to use

    .the_menu{
    position:absolute
    }

    If you have trouble positioning it, give position:relative to whatever element contains .the_menu

    Also be aware that z-index works well with absolutely positioned elements, if you run into the problem of having it show up behind something else.


    Use position: absolute; on the dropdown.

  • 0

    上一篇:

    下一篇:

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    最新问答

    问答排行榜