Hovering over the Second NavBar will display a block instead of just a line

Hey there, I'm facing an issue on my website with the second navbar where I display categories. Out of the 9 categories listed, 2 only have one line of text each. This causes the hover effect to only highlight the text line itself and not the entire block. Is there a way to make the hover effect cover the entire block for those categories with just one line?

This is the code snippet for the index:

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

As shown in the screenshot, I want the hover effect on "Agricultura" to be the same as that on "Soluções de embalagem".

I attempted adding a <br> tag, but it caused the text to no longer align center. I also tried using Display block, but this resulted in the navbar stacking vertically.

htmlcssnavbarnav

Answer №1

To create a responsive grid with 9 cells, you can utilize the following code snippet using CSS grid:

#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; /* align 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 effect on <li> */
  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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ng-bind-html not refreshed following ng-click triggering

Recently, I started learning about the MEAN stack. I have implemented an ng-repeat in my HTML code that displays a list of titles. Each title has an ng-click function attached to it, which is supposed to show more details in an overlay popup. blogApp.co ...

javascripthtmlangularjs

How can I display a PHP variable in JavaScript?

I am having trouble displaying a PHP variable in Javascript; Below is the code I am using: <script type="text/javascript> $(document).ready(function (){ var n=<?php echo json_encode($count)?>; for(var i=0;i<n;i++){ var div ...

javascriptphpjqueryhtml

Creating a layout design that adapts seamlessly to different screen

I am currently attempting to create the layout shown below for desktop using Bootstrap v4.3. https://i.sstatic.net/HCm7z.jpg This design should transition to the layout displayed below for mobile devices. https://i.sstatic.net/4Kzad.jpg However, upon r ...

htmlcsslayoutresponsive-designbootstrap-4

"Adding dots" in a slideshow using HTML, CSS, and JS

I'm currently working on a slideshow that includes navigation dots at the bottom. Although the slideshow is functioning properly, I am encountering an issue where only one dot appears instead of the intended three in a row. Despite my research and att ...

javascripthtmlcssslideshow

Using AngularJS to automatically fill in HTML select fields

Encountering an issue with an HTML select element in AngularJS. The API response returns one of the values as an integer, however, setting the "value" attribute for autofill is proving to be a challenge. Below is a screenshot showcasing the data received ...

htmlangularjs

Guide on invoking a code behind function within an aspx file using a server tag

I am working on setting the HeaderText property of a TabPanel using a code behind function like this: <asp:TabPanel ID="id" runat="server" HeaderText='<%= String.Format("{0}","some text") %>'> However, I am having trouble getting it ...

c#asp.nethtml

Angular: Implementing asynchronous data retrieval for templates

I am currently facing the following issue: I need to create a table with entries (Obj). Some of these entries have a file attribute. When an entry has a file attribute (entry.file), I need to make a backend call to retrieve the URL of that file: public g ...

htmlangulartypescriptrxjs

What is the best way to adjust the specific scope of every element generated by ng-repeat within a directive?

Attempting to simplify tables in Angular, I am working on a directive. My goal is for the user to only need to provide the list object and the formatting of each list element in the HTML, using the my-table tag as shown below... <h3>My Table</h3& ...

javascriptjqueryhtmlangularjs

Is there a way to obtain the ID of the submit button type?

I am wondering if it is possible to retrieve the value of a submit button's id without using JavaScript, as I need to insert these values into a MySql database. Below is the code snippet I have been working on: <form action="messages.php" method= ...

phphtmlsubmit

Ways to activate a function upon validation of an email input type

Within my HTML form, there is an input type="email" field that requires a valid email pattern for acceptance. I am attempting to send an AJAX request to the server to confirm whether the entered email already exists in the database after it has been verif ...

javascriptjqueryhtmlajax

What is the method for activating the on collapse event with a bootstrap navbar?

I am encountering a common issue with collapsing the navbar on smaller screens and triggering an event when the collapse button icon is clicked. Despite my efforts to find a solution, I have been unsuccessful in using the following JavaScript code: $(&apos ...

javascripthtmljquerycss

AngularJS tips for resolving an issue when trying to add duplicates of a string to an array

Currently dealing with a bug that occurs when attempting to push the same string into an array that has already been added. The app becomes stuck and prevents the addition of another string. How can I prevent the repeat from causing the app to get stuck w ...

javascripthtmlangularjsarrays

Lightbox2 is looking to reposition the caption to the right of the image

Can anyone help me understand how to move the caption, found in data-title, from underneath an image to the right of the image? I'm not very familiar with HTML/CSS, but it looks like the image is enclosed within a div called .lb-outerContainer, and t ...

javascripthtmlcsslightboxlightbox2

Changing the background color of a div after a mouse click

Recently, I attempted to change the background color of a div after clicking it using only CSS. I experimented with :visited, :focus, and .visited classes in CSS, but unfortunately, none of these methods worked. I am wondering if there is a solution to a ...

htmlcss

Transition effects should be applied solely to the foreground text color, not to the background image

Is there a way to specifically apply the css3 transition effect only to the text color? Imagine having a readmore class with a transition effect defined like this: .readmore { colour: red; -webkit-transition: all .3s ease-out; -moz-transition ...

htmlcss

"Interaction with jQuery causes button element to shift position upon resizing of browser

I am encountering an issue with a div element that has jQuery appended to it for a bounce effect. The element is absolutely positioned within its relative parent. However, when the browser is resized, the child element does not remain centrally aligned dur ...

jqueryhtmlcss

Adding an id to a ul tag using JavaScript

I am trying to dynamically add an ID called "myMenu" using JavaScript to a ul element for a search filter. Unfortunately, I am unable to directly access the ul tag to change it, so I need to do it via JavaScript. As I am new to JavaScript, I am looking t ...

javascripthtmljquerycss

Aligning a number in the center both vertically and horizontally within a div that is inside a table-cell

Is there a way to center a number both vertically and horizontally within a div that needs to be 60px in width and height, shaped like a circle, and placed in the center of a table-cell? I've managed to center the div within the table-cell but can&apo ...

htmlcss

Trying to align a telerik component in a bootstrap modal

I'm struggling to align the radmediaplayer telerik control in the center, but I can't seem to get it right. Any assistance would be greatly appreciated. Thank you. <asp:Panel ID="pnlModal3" runat="server" role="dialog" CssClass="modal fade"&g ...

cssasp.nettelerik

Implementing Decimal Input in Bootstrap-Vue for Google Chrome on Android

Issue is isolated to Google Chrome for Android (version 90.0.4430.210) and not present in other browsers. We have an input field that only allows numeric characters, structured like this: https://i.sstatic.net/zi4qn.png <b-form-input v-model="m ...

javascripthtmlvue.jsbootstrap-vuehtml-input