纯css实现子菜单制作

步骤1

        子绝父相（子菜单绝对定位  父菜单相对定位）

步骤2

        隐藏子菜单

步骤3

        hover到子菜单的父级li标签，使里面的子菜单显示出来

      <div class="menu">
        <div class="container">
            <img src="images/logo.png" alt="" class="logo">
                <ul class="nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">关于我们</a>
                    <!-- 子菜单 -->
                    <ul class="submenu">
                        <li>子菜单一</li>
                        <li>子菜单二</li>
                        <li>子菜单三</li>
                    </ul>
                    </li>
                    <li><a href="#">产品展示</a></li>
                    <li><a href="#">新闻动态</a></li>
                    <li><a href="#">在线留言</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>

#header .menu .nav>li{
    float: left;
    margin-left: 30px;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    /* 定位 */
    position: relative;
}
/* 子菜单 */
#header .menu .nav>li .submenu{
    width: 70px;
    background: #15bded;
    position: absolute;
    top: 40px;
    left: 0;
    /* 隐藏 */
    display: none;
}
#header .menu .nav>li .submenu li{
    line-height: 30px;
    text-align: center;
    color: white;
    
}
#header .menu .nav>li .submenu li:not(:last-child){
    border: 1px dashed white;
}
/* 子菜单显示 */
#header .menu .nav>li:hover .submenu{
    display:block; 
}

效果展示