*{
            margin:0;
            padding:0;
        }
        body{
            font-family: "微软雅黑";
            font-size:16px;
        }
        .mynav{
            text-align: center;
            margin:8px auto;

        }
        a{
            text-decoration: none;
        }
        .mynav .container{
            display:inline-block;
            border-bottom: 2px red solid;
            list-style-type: none;
            position:relative;
        }
        .mynav .container li{
            float:left;
        }
        .mynav .container li a{
            padding:15px 45px;
            display: inline-block;
            color: black;
            position:relative;
        }
        .mynav .container li a:hover{
            color: red;
        }
        .mynav .container li a:after{
            content:"";
            width:7px;
            height:7px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: 47%;
            bottom:-3px;
        }
        .dot{
            width:10px;
            height:10px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            bottom:-5px;
            left:-50px;
            opacity: 0;
            transition:all 0.8s ease-in-out;
            -webkit-transition:all 0.8s ease-in-out;
        }
        .mynav .container li:first-child:hover~.dot{
            left:9.5%;
            opacity: 1;
        }
        .mynav .container li:nth-child(2):hover~.dot{
            left:33%;
            opacity: 1;
        }
        .mynav .container li:nth-child(3):hover~.dot{
            left:59%;
            opacity: 1;
        }
        .mynav .container li:nth-child(4):hover~.dot{
            left:86%;
            opacity: 1;
        }