如何使悬停框足够大以覆盖导航项目，而不是覆盖整个部分答案

【问题标题】：How to get hover boxes to to be big enough to cover the nav items, and not to cover the whole section如何使悬停框足够大以覆盖导航项目，而不是覆盖整个部分
【发布时间】：2022-01-13 02:47:20
【问题描述】：

我正在创建一个导航栏，我想确保当我将鼠标悬停在导航项目上时，彩色框足够大以覆盖单词，但不会太大，它们会在项目下方展开。这可以在上图中看到。

我已将高度设置为 80px；有什么办法可以将导航的高度保持在 80px，但仍然可以解决这个问题？ [1]：https://i.stack.imgur.com/EH8Qt.png

【问题讨论】：

请提供相关的 HTML 和 CSS。截图不足以让我们诊断问题...

标签： css flexbox hover nav

【解决方案1】：

这将使您入门。只需要造型。

body {
      padding: 0;
      margin: 0;
    }

    .navbar {
      display: flex;
      background-color: #eee;
      font-family: sans-serif;
      height: 100px;
      color: black;
      border-top: 6px solid lightblue;
    }

    ul {
      display: flex;
      flex-direction: row;
      list-style: none;
    }

    ul>li>a {
      padding: 3px 12px;
      color: black;
      font-size: 16px;
      margin: 0 24px;
      text-decoration: none;
      display: block;
    }

    ul>li>a:hover {
      padding: 3px 12px;
      color: white;
      background: #ff6600;
      font-size: 16px;
      margin: 0 24px;
      text-decoration: none;
      display: block;

    }

    @media screen and (max-width: 992px) {
      ul>li>a {
        font-size: 12px;
        margin: 0 6px;
      }
      
        ul>li>a:hover {
      
          font-size: 12px;
                  margin: 0 6px;

         

    }

    

    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  <title>home</title>

</head>

<body>

  <div class="navbar">
    <ul>
      <li><a class="active" href=""><strong>COLLECTIONS</strong></a></li>
      <li><a href="">ANIMATIONS</a></li>
      <li><a href="">ANIMATIONS</a></li>
      <li><a href="">ANIMATIONS</a></li>
      <li><a href="">ANIMATIONS</a></li>
    </ul>
  </div>

</body>

</html>

【讨论】：