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

x8diyxa7 于 11个月前发布在其他

关注(0)|答案(1)|浏览(126)

好吧，在我的网站我有第二个导航栏把类别.我有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>

个字符
就像你在打印中看到的，我想在“Amphitura”上的悬停与“Soluçaises de embalagem”相同。

的数据
我试着做一个，但是文本不会再居中了。我尝试显示块，但是导航栏是垂直的。

Html

来源：https://stackoverflow.com/questions/77697645/second-navbar-hover-a-block-not-just-a-line

1条答案

按热度按时间

ui7jx7zq1#

我会用网格来做，如下所示。注意，因为有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);
}

个字符

赞(0）回复(0）举报 11个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答