我试图让头部的边框顶部有一种颜色,当在导航上悬停/活动时,它的一部分将变为另一种颜色.
同样,为什么我的li:hover标签,当我这样做border-top仍然返回我border-bottom？
我想在一张照片中实现的目标
如前所述,我也希望在开启时hover,边界过渡将超出图中的绿色边界线.
我怎样才能做到这一点？
这是我到目前为止所拥有的
/*** Page ***/
html,body {
margin: 0;
}
/*** Navigation ***/
.navbar {
background-color: #ecf0f1;
}
.navbar > .main-nav > ul,
li {
list-style-type: none;
text-decoration: none;
}
.navbar > .main-nav > ul {
min-height: 60px;
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
border-top: 8px solid #d1d064;
}
.navbar > .main-nav > ul > li {
text-align: center;
min-width: 150px;
position: relative;
top: -2px;
display: …