CODEWITHSUNDEEP
htmlcssdrop-down-menusubmenu
Yellow Flash
Yellow Flash

Reputation: 872

Dropdown box is not working in HTML page using CSS

when I move my cursor to the main menu("for example: Menu 2"), I can see my dropdown list under

example menu

After when i move my cursor to submenu1 it is not displaying and i can't select it too

here is my sample code:

<style type="text/css">

ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}

</style>

<div id="menu" align="left">

<ul id="menu">
    <li>
        <a href='<%=request.getContextPath()%>/auth/gs.page'>Menu1</a>
    </li>
    <li><a>Menu2</a>

        <ul class="sub-menu">
            <li>
                <a href='<%=request.getContextPath()%>/auth/view.page'>submenu1</a>
            </li>
        </ul>
    </li>

</div>

Please provide me idea to resolve it

Upvotes: 1

Views: 877

Answers (3)

adnrw
adnrw

Reputation: 1040

I am guessing the behaviour you're seeing is actually the submenu disappearing as you move your mouse down from the top-level nav item.

Because of the way you've set it up, there's a small gap (1-3px depending on browser and default user styles) that means it loses the hover status (and therefore hides the submenu) as you are "unhovering" the top-level nav item when you go over that gap.

If that is what you're seeing, the easiest way to fix it is to remove the top value from ul#menu li ul.sub-menu (you have it set to 30px) and add in equivalent padding to the li of the submenu to make it look right.

ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    left: 0;
    width: 100px;
}


ul#menu li ul.sub-menu li {
     padding-top: 2px;   
}

Here's a fiddle with that change: http://jsfiddle.net/adnrw/J44NJ/

Upvotes: 3

Aurand
Aurand

Reputation: 5547

ul#menu li:hover ul.sub-menu

Should probably be:

ul#menu li:hover ul.sub-menu, ul#menu li ul.sub-menu:hover

Upvotes: 2

Jazcash
Jazcash

Reputation: 3312

I don't see any problems when running your code. Could you clarify what you mean by "not displaying immediately"?

Upvotes: 2

Related Questions