html - 当我将鼠标指针悬停在链接上时如何完全填充导航栏高度？

Question

这里我正在为我的个人元素设计网页。我在我的网站中添加了这个导航栏，当我将鼠标指针悬停在这些链接上时，我希望完全填充导航栏中的链接。我在这里附上了我得到的屏幕截图。

导航栏的 html 代码

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3">
            <div class="container" style="overflow:auto">
                <a class="navbar-brand" asp-area="" asp-page="/Index">BookStore</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Books/Index">Books</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

导航栏背后的 CSS:

html {
  position: relative;
  min-height: 100%;
  margin: 0;
}

body {
  background-color: #cccccc;
  margin: 0;
  /*margin-bottom: 60px;*/
}

nav {
    background-color: #8080ff;
    margin: 0px;
    position: absolute;
}

.navbar-nav {
    height: 100%;
    margin: 0;
}

注意:我正在 Visual Studio 2022 中使用 ASP.NET 设计 Web 应用。

尝试更改 nav 类、body 类、html 类的边距属性。尝试将 height 属性设置为 100%。但没有任何效果!

Answer 1

您应该将 nav 元素的 padding 设置为 0px:

nav {
  background-color: #8080ff;
  margin: 0px;
  position: absolute;
  padding: 0px !important;
}