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

CSS块元素问题

1 个答案: