我是一个学生，还在学习，这是我的第一个项目，所以请容忍我。
在导航栏中，我试图添加一个悬停选择器的链接，在那里它显示了一个蓝色的酒吧顶部，应该接触到边界的网页。
上面的部分是它应该是什么样子，下面的部分是我试图复制它。

的数据

这是我的当前代码：

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 79px;
}

header img {
    padding: 30px 50px 30px 50px;
}

nav {
    display: flex;
    padding: 0 25px;
    gap: 68px;
}

nav a {
    display: inline-block;
    color: black;
    text-decoration: none;
    gap: 68px;
    margin-top: 9px;
    border-block-start: 2px solid rgba(0, 0, 0, 0);
}

nav a:hover {
    color: var(--main-color);
    border-block-start: 2px solid var(--main-color);
}

个字符
谢谢你的帮忙。