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（我在Half Life和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>

我需要改变什么？

注意：是的，我还没有快速完成＆＃39; a＆＃39;标签...

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

Answer 2

尝试此代码：

HTML CODE：

<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>
                    <ul>
                <li><a href="#">GLaDOS</a></li>
                <li><a href="#">Testing Chambers</a></li>
                <li><a href="#">The Player (Chell)</a></li>
            </ul>
                </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>

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;
    position: relative;
}
#navigation a {
    display:block;
    width:60px;
    background-color:#FFF;
}
#navigation ul li ul{
    position: absolute;
    top: 28px;
    opocity: 0;  
    display: none;
}
#navigation ul li:hover ul{
    opocity: 1;
    display: block;
}

参见演示http://jsfiddle.net/JentiDabhi/j50Lncva/

Answer 3

检查代码

#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:#ccc;
    color:#000;
  text-decoration: none;
}
#menus ul li a:hover{background: #666;}
#menus ul ul{
    position:absolute;
    left:0;
    width:200px;
    transition:all .5s; 
    max-height: 0;
    overflow: hidden;
}
#menus  ul.submenu li{
    display:block; 
}
#menus  ul.submenu li a{
    display:block;
    background:blue;
  color: #fff;
}
#menus  ul.submenu li a:hover{background: #333;}
#menus ul li:hover ul{
    max-height: 10000px;
}

<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="#">Sub Menu</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 - 如何使用子菜单创建简单的导航菜单？

3 个答案: