*{ 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; }