Navigation items when hovered is increasing the overall size of the navigation bar-CodePudding

I have created a navigation bar with a hover background color when you hover the mouse over a navigation item.

The problem is when you hover the mouse over the navigation item eg. home, the navigation bar increases in height.

HTML

  <nav  id="home">

    <a href="#" >
      <span ></span>
      <span ></span>
      <span ></span>
    </a>

    <div >

      <ul >

        <li ><a href="#home" >home</a></li>
        <li ><a href="#about-me" >about me</a></li>
        <li ><a href="#services" >services</a></li>
        <!-- <li ><a href="#portfolio" >portfolio</a></li> -->
        <!-- <li ><a href="#blog" >blog</a></li> -->
        <li ><a href="#contact" >contact</a></li>
        <!-- <li ><a href="#work" >Work</a></li> -->

      </ul>

    </div>

  </nav>

CSS

.nav {
  display: flex;
  justify-content: right;
  align-items: center;
  background-color: var(--clr-main);
}

.nav-item {
  margin-right: 10px;
  list-style: none;
}

.nav-link{
  font-size: 20px;
  text-decoration: none;
  color: var(--clr-secondary);
  font-weight: var(--fw-bold);
  display: block;
}

.nav-list{
  display: flex;
  padding: 0;
}

.nav-item:hover{
  background-color: #00a6ff;
  padding: 10px;
}

Is there a way to hover over the navigation item and not increase the size of the navigation bar? The increase in size makes the padding background color not reach the top and bottom of the navigation bar.

CodePudding user response：

You'll need to add padding to the nav-item class in CSS:

.nav {
  display: flex;
  justify-content: right;

  align-items: center;
  background-color: var(--clr-main);
}

.nav-item {
  margin-right: 10px;
  padding: 10px;
  list-style: none;
}

.nav-link{
  font-size: 20px;
  text-decoration: none;
  color: var(--clr-secondary);
  font-weight: var(--fw-bold);
  display: block;

}

.nav-list{
  display: flex;
}

.nav-item:hover{
  background-color: #00a6ff;
}

 <nav  id="home">

    <a href="#" >
      <span ></span>
      <span ></span>
      <span ></span>
    </a>

    <div >

      <ul >

        <li ><a href="#home" >home</a></li>
        <li ><a href="#about-me" >about me</a></li>
        <li ><a href="#services" >services</a></li>
        <!-- <li ><a href="#portfolio" >portfolio</a></li> -->
        <!-- <li ><a href="#blog" >blog</a></li> -->
        <li ><a href="#contact" >contact</a></li>
        <!-- <li ><a href="#work" >Work</a></li> -->

      </ul>

    </div>

  </nav>