html - CSS - 如何制作带有子菜单的简单导航菜单？

Question

我目前正在学习 HTML 和 CSS。我完成了导航菜单，但在主要选择下有子菜单。这是我的代码:

#navigation ul {
    font-family:Arial;
    list-style-type:none;
    margin:0;
    padding:0;
}
#navigation li {
    font-family:Arial;
    font-size:11px;
    display:inline;
    float:left;
    background-color:#FFF;
}
#navigation a {
    display:block;
    width:60px;
    background-color:#FFF;
}

这是我的 HTML(我正在半条命和 Portal 上制作一个网站来学习):

<div id="menus">
    <div id="navigation">
        <ul>
            <li><a href="#">Aperture Science</a></li>
            <ul>
                <li><a href="#">GLaDOS</a></li>
                <li><a href="#">Testing Chambers</a></li>
                <li><a href="#">The Player (Chell)</a></li>
            </ul>
        </ul>
        <ul>
            <li>Black Mesa</li>
            <ul>
                <li>The Combine</li>
                <li>The Resistance</li>
                <li>The Player (Gordon Freeman)</li>
            </ul>
        </ul>
</div>

我需要改变什么？

注意:是的，我还没有完成快速添加“a”标签...

Answer 1

你可以使用这段代码---

<div id="menus">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a>
            <ul class="submenu">
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>

            </ul>
        </li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
    </ul>
</div>

CSS--

#menus ul{
    padding:0
}
#menus ul li{
    display:inline-block;
    margin-right:-2px;
    position:relative;
}
#menus ul li a{
    display:inline-block;
    padding:5px 10px;
    background:red;
    color:#FFF;
}
#menus ul ul{
    position:absolute;
    left:0;
    width:0px;
    transition:all .5s;
}
#menus  ul.submenu li{
    display:block;
    transform:scale(0, 1); 
    transition:all .5s;
}
#menus  ul.submenu li:nth-child(2){
    transition-delay:.05s;
}
#menus  ul.submenu li:nth-child(3){
    transition-delay:.1s;
}
#menus  ul.submenu li:nth-child(3){
    transition-delay:.15s;
}
#menus  ul.submenu li:nth-child(4){
    transition-delay:.2s;
}
#menus  ul.submenu li:nth-child(5){
    transition-delay:.25s;
}
#menus ul li:hover ul{
    display:block;
    width:auto;
}
#menus ul li:hover ul li{
    transform:scale(1, 1);
    transform-origin: right top;
}

实时查看 jsfiddle demo