Question

I am trying to do a dropdown menubar in my application. I want to have my menu bar look like

 __________________
|                  |
|__________________|
     |_____________|
     |_____________|
     |_____________|

but after i styled my html, it turns out

__________________
|    ______________|
|___|______________|
    |______________|
    |______________|

The submenu is inside my main menu button.

My html is as follow

<nav>

        <ul id='menu'>
            <li id=browser ><a href=#>test</a>
                <ul>
                    <li><?= anchor('#','1');?></li>
                    <li><?= anchor('#','2');?></li>
                    <li><?= anchor('#','3');?></li>
                </ul>
            </li>

            <li id=user_management><a href=#></a></li>
            <li id=log_out><a href=#> </a></li>
        </ul>

    </nav>

and my css

nav > ul{
        list-style:none;
        width: 816px;
        margin: 0 auto;
    }

    nav > ul #browser{      my main menu button
            border:2px solid red; 
            width:270px;
            height:32px;
            display:block;
            float:left;
            margin-right:2px;
            background-image:url('../images/browser_BT.jpg');
    }

    #browser li{       //my submenu
    border:2px solid red;
    list-style:none;
    text-align:left;
    display:block;

    }

It seems that my submenu ignore the block element of my my main menu button. Any help? Thanks a million.

Answer 1

Position your submenu absolutely, like so:

#browser ul {       //my submenu
    position:absolute;
    top:100%;
    left:0;
}