html - 如何设置 CSS 子菜单的样式？

Question

我试图关注 this example但我不能让它满足我的需要，一些帮助将不胜感激。

更新:好的，感谢 yourkishore，我的子菜单位置更好，我现在解决了一些如何处理嵌套菜单的问题，但我的子菜单仍然出现在我的文本底部？

** Updated jsFiddle **

HTML:

<ul id="menubar">
    <div id="title">title</div>
    <li>File
        <ul>
        <li>Photoshop CC</li>
        <li>Illustrator CC Adobe</li>
        <li>My Web Design
            <ul>
            <li>HTML</li>
            <li>CSS</li>
            </ul>
        </li>
        </ul>
    </li>
    <li>Config</li>
</ul>
<div id=other></div>

CSS

html, body {height:100%;width:100%;margin:0;}
#menubar {
    background: #eeeeee;
    height:25%;
    list-style-type: none;
    width:100%;
    display: inline-table;
    margin:0;
    padding:0;
    z-index:99;
}
#menubar #title {
    display:inline-block;
    padding:0 5%;
    font-size:140%;
    font-weight:bold;
    float:left;
    height:100%;
    display: inline-flex;
    align-items: center;
}
#menubar li {
    height:100%;
    position:relative;
    float:left;
    padding:0 1%;
    list-style-type: none;
    white-space:nowrap;
    display: inline-flex;
    align-items: center;
}
#menubar li:hover {
    background-color:#7faddb;
}
#menubar li > ul {
    background-color:white;
    z-index:99;
    display: none;
    position:absolute;
    list-style-type: none;
    margin:0;
    padding:0;
}
#menubar li:hover > ul {
    display: block;
}
#other {
    background-color:green;
    position:absolute;
    top:25%;
    bottom:0;
    left:0;
    right:0;
}

Answer 1

它显示在菜单内，因为它们在里面。当您将鼠标悬停在上面时，使它们出现在外面。您需要设置一个名为 position 的属性。

对于 #menubar li 你需要添加 poistion:relative

然后对于#menubar li ul，您需要添加 position:absolute。

菜单总是作用于这个重要的属性。没有这个就没有带有嵌套列表的菜单。刚学会css定位。一切顺利。