html 二级菜单

先放效果图:
html 二级菜单_第1张图片

首先设置菜单的基本轮廓

<div id="nav">
    <ul>
        <li><a href="#">一级菜单1a>li>
        <li><a href="#">一级菜单2a>li>
        <li>
            <a href="#" class="caidan3">菜单3a>
            <ul class="yincang">
                <li><a href="#">javascripta>li>
                <li><a href="#">子菜单2a>li>
                <li><a href="#">子菜单3a>li>
            ul>
        li>
        <li><a href="#">一级菜单3a>li>
        <li><a href="#">一级菜单4a>li>
        <li><a href="#">一级菜单5a>li>
    ul>

div>

基本原理就是二级菜单先设置隐藏,当鼠标放到一级菜单之上时再显示二级菜单

核心代码:

 ul li ul{
            display: none;
        }
        li:hover .yincang{
            display: block;
        }

注意要点

1.一级菜单和二级菜单必须在同一个父元素之下。
2. (这之前的必须是一级菜单的上一级,比如当前代码,一级菜单是“菜单三”,为a标签,那么这里就应该写它的上一级‘li’)li:hover .yincang(后面就直接写被隐藏的元素标签)
3. line-height: 设置行间距
4. text-decoration: none :去除a元素的下划线
5. list-style:none :去除 ul li的圆点

完整代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #nav{
            background: #eee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }
        ul{
            list-style:none;
        }
        ul li{
            float: left;
            line-height: 40px;
            text-align: center;
            position: relative;
        }
        a{
            text-decoration: none;
            color: #000;
            display: block;
            padding: 0 10px;
            height: 40px;
        }
        a:hover{
            color: #fff;
            background: #666;
        }
        ul li ul li{
            float: none;
            background: #eee;
            margin-top: 2px;
        }
        ul li ul{
            position: absolute;
            left: 0;
            top: 40px;
        }
        ul li ul li a{
            width: 80px;
        }
        ul li ul li a:hover{
            background: #06f;
        }
        ul li ul{
            display: none;
        }
        .yiji:hover .yincang{
            display: block;
        }
    style>
head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">一级菜单1a>li>
        <li><a href="#">一级菜单2a>li>
        <li class="yiji">
            <a href="#" class="caidan3">菜单3a>
            <ul class="yincang">
                <li><a href="#">javascripta>li>
                <li><a href="#">子菜单2a>li>
                <li><a href="#">子菜单3a>li>
            ul>
        li>
        <li><a href="#">一级菜单3a>li>
        <li><a href="#">一级菜单4a>li>
        <li><a href="#">一级菜单5a>li>
    ul>

div>
body>
html>

你可能感兴趣的:(html 二级菜单)