自适应导航栏

自适应导航栏

HTML

        
logo
        

            

                
首页
                

                    新闻
                    

                        
国内动态
                        
国外动态
                    
                
                
公司介绍
                

                    招揽人才
                    

                        
社会人才
                        
学校人才
                    
                
                
登录
            
        
    

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%;
        }