我正在寻找帮助，对编程有点陌生，我曾尝试用谷歌搜索解决方案，但无法弄清楚。我如何获得下拉菜单以使用导航栏的整个高度？我试图用CSS来做，但是无法完成工作。我加了一张照片显示问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Heima</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="static/landing/styles.css">
.navbar-dark:hover .navbar-nav:hover .nav-link:hover
{
color: #fff;
width: 100%;
}
.bg-color{
background-color: #18191a;
}
.dropdown:hover{
background-color: #2f2f30;
height: 10%;
}
a:hover{
link-color: #fff;
color: #fff;
}
a{
link-color: #fff;
color: grey;
}
.nav-item dropdown
{
width: 100%;
}
</head>
<body>
<nav class="navbar navbar-expand-sm bg-color navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Akfør
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
</body>
</html>
据我了解，您的问题是导航栏的填充。
尝试将以下内容添加到CSS中：
.navbar {
padding: 0px 1rem;
}
这将删除填充，因此下拉阴影将使用导航栏的整个高度。