自适应导航栏

HTML

<div class="header">
        <div class="logo">logo</div>
        <div class="rightTitle">
            <ul>
                <li>首页</li>
                <li class="hover">
                    新闻
                    <ul class="hoverTitle">
                        <li>国内动态</li>
                        <li>国外动态</li>
                    </ul>
                </li>
                <li>公司介绍</li>
                <li class="hover1">
                    招揽人才
                    <ul class="hoverTitle1">
                        <li>社会人才</li>
                        <li>学校人才</li>
                    </ul>
                </li>
                <li>登录</li>
            </ul>
        </div>
    </div>

css

.header{
            height: 60px;
            display: fixed;
            background-color: skyblue;
            padding: 0 50px;
            line-height: 60px;
        }
        .logo{
            display: inline-block;
            width: 50px;
            color: red;
        }
        .rightTitle{
            float: right;
            /*display: flex;      flex布局使导航标签横向排布*/
        }
        ul{
            list-style: none;  /*去掉前面的圆点*/
            margin: 0px;        /*ul 默认margin-left:40px;*/
            padding: 0px;      /*  默认padding-left: 40px;*/
            display: flex;       /*flex布局使导航标签横向排布*/
        }
        li{
            cursor: pointer;
            padding: 0 20px;
        }
        .hoverTitle,.hoverTitle1{        /* 悬挂导航首先隐藏*/
            display: none;          
        }
        .hoverTitle li,.hoverTitle1 li{
            padding: 0;
        }
        .hover:hover .hoverTitle{       /*鼠标悬浮显示*/
            display: block;
        }
        .hover1:hover .hoverTitle1{
            display: block;
        }
        .hover{
            position: relative;
        }
        .hoverTitle{                 /*当下面标签较宽时如此处理可以防止上面的标签跑动*/
            position: absolute;
            top: 60px;
            width: 200%;
        }