Second NavBar hover a block not just a line

Question

Second NavBar hover a block not just a line

37 Views Asked by Ricardo Augusto At 21 December 2023 at 11:25

Ok, In my website I have a second navbar to put categories. I have 9 categories and 2 has only one line, so the hover just hover the line and not the block. It's possible to do hover on the block where I have just one line? This is the index code:

<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;
  }

Like you see in the print, I want the hover on "Agricultura" was the same of "Soluções de embalagem".

The hover I talk

I try to do a <br>, but the text won't center anymore. I try the Display block but the navbar put in vertical.

Original Q&A

There are 1 best solutions below

**Pascal** · Answer 1 · 2023-12-21T15:05:59.700000

I would do it using grid, as follows. Note that as there are 9 cells, this is not really responsive as it is, but I guess it was out of the scope of this question.

#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>

Second NavBar hover a block not just a line

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in NAVBAR

Related Questions in NAV

Trending Questions

Popular # Hahtags

Popular Questions