* { margin:0; padding:0; } .nav { list-style:none; width:300px; margin:100px auto; /*border:1px solid #000; */ } .nav>li { border:1px solid #000; line-height:35px; border-bottom:none; text-indent:2em; position:relative; } .nav>li:last-child { border-bottom:1px solid #000; border-bottom-right-radius:10px; border-bottom-left-radius:10px; } .nav>li:first-child { border-top-right-radius:10px; border-top-left-radius:10px; } .nav>li>span { background:url("images/arrow_right.png") no-repeat center center; display:inline-block; width:32px; height:32px; position:absolute; right:10px; top:5px; } .sub { display:none; } .sub>li { list-style:none; background:mediumpurple; border-bottom:1px solid white; } .sub>li:hover { background:red; } .nav>.current>span { transform:rotate(90deg); }