Проблема блочного элемента CSS

Question

Я пытаюсь сделать раскрывающееся меню в моем приложении. Я хочу, чтобы моя строка меню выглядела как

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

но после того, как я ввел свой html, получается

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

Подменю находится внутри моей кнопки главного меню.

Мой HTML-код выглядит следующим образом

<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>

и мой 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;

    }

Похоже, что мое подменю игнорирует элемент блока моей кнопки главного меню. Любая помощь? Бесконечно благодарен.

Answer 1

Расположите ваше подменю абсолютно так:

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