html边框移动位置,html – 悬停边框位置

您想要定位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; /*

}