第二个导航栏悬停在一个块上，而不仅仅是一条线

Question

好的，在我的网站中，我有第二个导航栏来放置类别。我有 9 个类别，其中 2 个类别只有一行，因此悬停仅悬停在该行而不是该块上。可以将鼠标悬停在只有一行的块上吗？这是索引代码：

<nav id="menu-h">
    <ul>
        <li><a href="catalogo.php">GoodCaring</a></li>
        <li><a href="catalogo.php">Saúde e Higiene Sénior</a></li>              
        <li><a href="catalogo.php">Logística e <br>Indústria</a></li>
        <li><a href="catalogo.php">Soluções de embalagem</a></li>          
        <li><a href="catalogo.php">Agricultura</a></li>         
        <li><a href="catalogo.php">Gestão de <br>Resíduos</a></li>              
        <li><a href="catalogo.php">Artigos de <br>Celulose</a></li>
        <li><a href="catalogo.php">Artigos de Higiene e Limpeza</a></li>
        <li><a href="catalogo.php">Embalagens Biodegradáveis</a></li>    
    </ul>
 </nav>

#menu-h ul {
  max-width: 1600px;
  min-height: 57px;
  list-style: none;
  padding: 0;
  margin: auto;
  background-color: rgb(204, 204, 204);
  }
  #menu-h ul li{
      display: inline;
  }
  #menu-h ul li a{    
      border-radius: 10px;
      display: inline-block;
      /*line-height: center;*/
      vertical-align: middle;
      transition: background .5s;
      color: #483e3e; 
      text-align: center;
      padding: 5px;
      text-decoration: none;
      font-size: 17px;
      width: 10.80%;
      
  }
  #menu-h ul li a:hover {
      background-color: rgb(166, 232, 57);
      border-radius: 10px;
      color: white;
      border-bottom-style: inset; 
      border-bottom-width: 6px;
      border-bottom-color: rgb(19, 83, 57);
      text-align: center;
  }

就像您在印刷品中看到的那样，我希望“农业”上的悬停与“Soluções de embalagem”相同。

The hover I talk

我尝试做一个
，但文本不再居中。我尝试使用显示块，但导航栏垂直放置。

Answer 1

我会使用网格来完成它，如下所示。请注意，由于有 9 个单元格，这并不是真正的响应，但我想这超出了这个问题的范围。

#menu-h ul {
  display: grid;
  grid-template-columns: repeat(9, 1fr);  /* 9 cells in the grid, of same width */
  gap: 1rem;  /* gap between 2 cells of the grid */

  max-width: 1600px;
  min-height: 57px;
  list-style: none;
  padding: 0;
  margin: auto;
  background-color: rgb(204, 204, 204);
}

#menu-h ul li {
  display: flex;
  justify-content: center;  /* align the box of <a> horizontally */
  align-items: center; /* align the box of <a> vertically */
  text-align: center; /* alithe the text of <a> */

  border-radius: 10px;
  transition: background .5s;
  font-size: 17px;

  border-bottom-style: solid;
  border-bottom-width: 6px;
  border-bottom-color: rgb(204, 204, 204);  /* same border color as the background */
}

#menu-h ul li a {
  text-decoration: none;
  color: #483e3e;
}

#menu-h ul li:hover {   /* hover of <li> so that the effect is performed on the cell of the grid */
  background-color: rgb(166, 232, 57);
  border-radius: 10px;
  color: white;
  border-bottom-color: rgb(19, 83, 57);
}

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="style.css">
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>

<body>

  <nav id="menu-h">
    <ul>
      <li><a href="catalogo.php">GoodCaring</a></li>
      <li><a href="catalogo.php">Saúde e Higiene Sénior</a></li>
      <li><a href="catalogo.php">Logística e <br>Indústria</a></li>
      <li><a href="catalogo.php">Soluções de embalagem</a></li>
      <li><a href="catalogo.php">Agricultura</a></li>
      <li><a href="catalogo.php">Gestão de <br>Resíduos</a></li>
      <li><a href="catalogo.php">Artigos de <br>Celulose</a></li>
      <li><a href="catalogo.php">Artigos de Higiene e Limpeza</a></li>
      <li><a href="catalogo.php">Embalagens Biodegradáveis</a></li>
        </ul>
</nav>

</body>
<script type="text/javascript" src="script.js"></script>

</html>

第二个导航栏悬停在一个块上，而不仅仅是一条线

问题描述投票：0回答：1

1个回答

最新问题

第二个导航栏悬停在一个块上，而不仅仅是一条线

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1