需要我的悬停状态才能使我的导航栏更大

Question

现在紫色只是覆盖了文本，但它应该像下拉菜单一样是一个不错的颜色块。另外，我的导航 img 下有一个栏，当我悬停时不应该在那里。我知道这是一个宽度/高度的问题，但无论我把代码放在哪里，它都不起作用。

https://codepen.io/Smoki248/pen/NWxrOWK

li {
list-style: none;
}
a {
color: #f2f2f2;
text-decoration: none;
}
a:hover {
background-color: #8781bd;

}
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
}

.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 400;
font-family: "Amatic SC", Roboto, sans-serif;
border: 1px #8781bd solid;
border-radius: 2px;
background: #8781bd;
color: #f2f2f2;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 0px;
display: flex;
align-items: center;
background-color: #2f2f2f;
}
@media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
@media (max-width:650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}

@media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}

nav {
font-weight: 400;
}
@media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
}
h1 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 35pt;
width: 100%;
text-align: center;
}
h2 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 24pt;
width: 100%;
text-align: center;
}


nav li {
padding-bottom: 30px 0px;
}
nav > ul {
width: 30vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
@media (max-width: 650px) {
nav > ul {
flex-direction: column;
}
}
.dropdown > li{
float: right;
overflow: hidden;

}

.dropdown > li a {
font-size: 16px;  
border: none;
outline: none;
color: #f4f4f4;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;

}

nav > li a:hover, .dropdown:hover a {
background-color: #8781bd;
color:#f4f4f4;

}

.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: #f4f4f4;
z-index: 1;
margin-top: 20px;
min-width: 100px;
}

.dropdown-content  li a {
float: none;
color: #f4f4f4;
padding:  10px 14px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content  li a:hover {
background-color: #625aa9;
	  color: #f4f4f4;
}

.dropdown:hover .dropdown-content {
display: block;
}

<header id="page-wrapper">
<header id="header">
<div class="logo">
<nav>
<a href="http://www.wrecklessdevelopment.com"><img id="header-img"
src="images/wreckless-development-logo.gif" alt="Wreckless Development Logo"/></a>
</nav>
</div>
<h1>Wreckless Development</h1>
<nav id="navbar">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<div class="dropdown">
<li><a href="portfolio"><i class="fa fa-caret-down"></i> Portfolio</a><li>
<div class="dropdown-content">
<ul>
<li><a href="photography.html">Photography</a></li>
<li><a href="composite.html">Composite</a></li>
<li><a href="logos.html">Logos</a></li>
<li><a href="branding.html">Branding</a></li>
<li><a href="advertising.html">Advertising</a></li>
</ul>
</div>
</div>
<li><a href="contact.html">Contact</a></li>
<li><a href="blog.html">Blog</a></li>

</ul>
</nav>
</header>
</header>

Answer 1

问题是标签a的默认显示是inline，所以如果你想调整a标签的高度，你必须像这样将其默认显示更改为display: inline-block，然后你可以用那个标签做任何你想做的事情，你可以参考我的代码下面的更多详细信息：

#header a {
display: inline-block; // change display style
height: 75px;
line-height: 75px; // center the text
padding-left: 12px;
padding-right: 12px;
}
.dropdown > li > a {
padding: 0 16px; // no need to padding top and bottom because we already had line-height and height
}
.dropdown-content{
margin-top: 75px; // push the .dropdown-content further to fit new css
}
#header .dropdown-content li a{
display: block; // set an <a> tag to full with of the dropdown
height: auto;
line-height: 16px; // center the text with current font-size
}

您可以在此处查看我的 codepen.io 以获取更多详细信息。希望会有所帮助