Question 180577 in Html Question posted in
Some basic documentation can be found here.

Html – Need help personalizing my CSS navbar: how do I highlight the <li> element on mouseover?

I am trying to make a simple navbar I managed to make the base but when I try to personalize I am getting stuck.

My objective is that when the mouse goes over each element(home, etc) it highlights like a box, but currently it only highlights the <a> I tried and not the <li> holding it.

I’m trying to make the <li> an anchor that can be clicked and highlighted similar to stack’s navbar.

.nav-top {
  background: rgb(151, 138, 63);
  margin: 0;
  padding: 1rem 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

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

.nav-top ul {
  margin: 0 auto;
  padding: 0;
  list-style: none
}

.nav-top li:hover {
  display: block
}

.nav-top a:hover {
  background: #F2F2F2;
  color: #444444;
}

.nav-item a {
  text-decoration: none;
  color: white;
  width: 100px;
}

.nav-item:first-child {
  margin-right: auto;
  margin-left: 2rem;
}

.nav-item a:hover {
  color: aqua;
}
<navbar>
  <ul class="nav-top">
    <li class="nav-item"><label class="logo">LoremX</label></li>
    <li class="nav-item"><a href="index.html">Home</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item" id="contact"><a href="#">Contact</a></li>
  </ul>
</navbar>
Tags:

2

Answers


  1. 0

    just add padding and a border in an anchor element

    .nav-item a {
  text-decoration: none;
  color: white;
  width: 100px;
  padding: 10px;
  border-radius: 10px;
}
    Login or Signup to reply.
  2. 0

    The only :hover declaration you have for li is the default value of display: block. The color change declarations are made only for a

    Not related to the hover effect, just correcting your markup:

    • You have .nav-top ul selector but the example doesn’t include a nested ul
    • I suspect that you are misusing the label element.
    • navbar is not an HTML element and I suspect you want nav
    .nav-top {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: rgb(151, 138, 63);
}

.logo {
  margin-right: auto;
  margin-left: 2rem;
  padding: 5px 10px;
}

.nav-item {
  margin-right: 1.2rem;
  padding: 5px 10px;
}

.nav-item a {
  text-decoration: none;
  color: white;
}

.nav-item:hover,
.nav-item:hover a {
  color: aqua;
  background: #F2F2F2;
}
    <nav>
  <ul class="nav-top">
    <li class="logo">LoremX</li>
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item" id="contact"><a href="#">Contact</a></li>
  </ul> 
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search