* { margin:0; padding:0; } li,a { text-decoration:none; list-style:none; color:#484848 } .nav { width:1000px; height:50px; border:1px solid #ccc; margin:0 auto; line-height:50px; margin-top:50px; } /*-----------------------导航1111111111-----------------------------*/ .nav1 a { width:70px; height:100%; float:left; margin:0 15px; position:relative; text-align:center; } .nav1 a span { margin:auto; display:inline-block; position:absolute; bottom:5px; left:0; right:0; width:0px; height:2px; background:#ff0000; transition:.5s; border-radius:50px; } .nav1 a:hover span { width:100%; left:0; } /*-----------------------导航2222222-----------------------------*/ .nav2 a { width:70px; height:100%; float:left; margin:0 15px; position:relative; text-align:center; } .nav2 a span { margin:auto; display:inline-block; position:absolute; bottom:5px; left:0; width:0px; height:2px; background:#ff0000; transition:.5s; border-radius:50px; } .nav2 a:hover span { width:100%; }