Hover effect on search box should be disabled

Question

I'm trying to fix the hover effect issue here in my learning project and its not happening. There should be no hover effect on the search box li. Any help will be appreciated! Thanks!

I made all those classes to separate it instead of directly targeting li. Once I also swapped li with and it worked. But HTML validator pointed out it as an error... hmm and yeah, we can't put div in ul.

Any help would be appreciated.

Thanks!

Here goes the HTML part of it:

 nav ul {
  display: flex;
  padding-inline-start: 40px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: fit-content;
  border-radius: 4px;
  border: 1px solid rgb(87, 86, 86);
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial,
    Verdana, sans-serif;
  top: 110px;
  left: 200px;
}

.store,.mac,.ipod,.iphone,.ipad,.itunes,.support,.appleLogoInNavBar {
  width: 102px;
  height: 36px;
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
  cursor: pointer;
}

nav li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0px -1px black;
}

.searchLi{
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
}

.navBar li:hover {
  background:
    linear-gradient(rgb(97, 96, 96),
      rgb(51, 50, 50),
      rgb(49, 49, 49));
}

 <nav class="navBar">
        <ul>
            <li class="appleLogoInNavBar">
                <a href="#">
                    <img src="images/AppleLogo.png" alt="Apple Logo">
                </a>
            </li>
                    <li class="store"><a href="#">Store</a></li>
                    <li class="mac"><a href="#">Mac</a></li>
                    <li class="ipod"><a href="#">iPod</a></li>
                    <li class="iphone"><a href="#">iPhone</a></li>
                    <li class="ipad"><a href="#">iPad</a></li>
                    <li class="itunes"><a href="#">iTunes</a></li>
                    <li class="support"><a href="#">Support</a></li>
                    <li class="searchLi"><input class="searchInput" type="search"></li>
        </ul>
    </nav>   

Thank You!

Answer 1

One option is to change the .navBar li:hover selector in your CSS to .navBar li:not(.searchLi):hover.

nav ul {
  display: flex;
  padding-inline-start: 40px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: fit-content;
  border-radius: 4px;
  border: 1px solid rgb(87, 86, 86);
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial,
    Verdana, sans-serif;
  top: 110px;
  left: 200px;
}

.store,.mac,.ipod,.iphone,.ipad,.itunes,.support,.appleLogoInNavBar {
  width: 102px;
  height: 36px;
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
  cursor: pointer;
}

nav li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0px -1px black;
}

.searchLi{
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
}

.navBar li:not(.searchLi):hover {
  background:
    linear-gradient(rgb(97, 96, 96),
      rgb(51, 50, 50),
      rgb(49, 49, 49));
}

<nav class="navBar">
        <ul>
            <li class="appleLogoInNavBar">
                <a href="#">
                    <img src="images/AppleLogo.png" alt="Apple Logo">
                </a>
            </li>
                    <li class="store"><a href="#">Store</a></li>
                    <li class="mac"><a href="#">Mac</a></li>
                    <li class="ipod"><a href="#">iPod</a></li>
                    <li class="iphone"><a href="#">iPhone</a></li>
                    <li class="ipad"><a href="#">iPad</a></li>
                    <li class="itunes"><a href="#">iTunes</a></li>
                    <li class="support"><a href="#">Support</a></li>
                    <li class="searchLi"><input class="searchInput" type="search"></li>
        </ul>
    </nav>

Answer 2

You can use this selector .navBar ul li:not(:last-child):hover that is selecting all the li elements but NOT the last one.

nav ul {
  display: flex;
  padding-inline-start: 40px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: fit-content;
  border-radius: 4px;
  border: 1px solid rgb(87, 86, 86);
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial,
    Verdana, sans-serif;
  top: 110px;
  left: 200px;
}

.store,.mac,.ipod,.iphone,.ipad,.itunes,.support,.appleLogoInNavBar {
  width: 102px;
  height: 36px;
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
  cursor: pointer;
}

nav li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0px -1px black;
}

.searchLi{
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
}

.navBar ul li:not(:last-child):hover {
  background:
    linear-gradient(rgb(97, 96, 96),
      rgb(51, 50, 50),
      rgb(49, 49, 49));
}

<nav class="navBar">
        <ul>
            <li class="appleLogoInNavBar">
                <a href="#">
                    <img src="images/AppleLogo.png" alt="Apple Logo">
                </a>
            </li>
                    <li class="store"><a href="#">Store</a></li>
                    <li class="mac"><a href="#">Mac</a></li>
                    <li class="ipod"><a href="#">iPod</a></li>
                    <li class="iphone"><a href="#">iPhone</a></li>
                    <li class="ipad"><a href="#">iPad</a></li>
                    <li class="itunes"><a href="#">iTunes</a></li>
                    <li class="support"><a href="#">Support</a></li>
                    <li class="searchLi"><input class="searchInput" type="search"></li>
        </ul>
    </nav>