您想要定位ul和li – 将子li的底部偏移到边框的宽度,同时将其设置为透明,然后使用li:hover事件/选择器将broder颜色设置为红色.
使用以下CSS:
ul {
list-style: none;
margin: 0;
border-bottom: 5px solid green;
position:relative;
padding:0;
}
ul li {
padding:10px 10px;
margin-left: 20px;
display:inline-block;
position:relative;
bottom:-5px; /*
border-bottom: 5px solid transparent; /* add border, make transparent so it doesnt 'jump' on hover */
}
a {
text-decoration: none;
display: block;
}
li:hover {
border-color:red; /*
}