html - 需要我的悬停状态才能使导航栏变大

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>

标签： htmlcsshover

Answer 1

问题是 taga的默认显示是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 中查看更多详细信息。希望它会有所帮助