CODEWITHSUNDEEP
htmlcsshoverflexbox
user8487655
user8487655

Reputation:

Border-bottom below the list items on hover is not working

I want to have a menu with a green border at bottom of each list item on "hover" and also have the green border bottom in the list item with the class active. But I want that the <a> element inside each list item is vertically and horizontally centered and that with the :hover effect the <a> element remains always at center.

I have the menu in this example: https://jsfiddle.net/fyh7o9jj/ but the border-bottom is not appearing. Do you know where is the issue?

.menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  transition: all 200ms ease-out;
}
.menu li {
  align-items: center;
  border-bottom: 0 solid gray;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  height: 59px;
  justify-content: center;
  padding: 5px 0;
  background-color: yellow;
}
.menu li a {
  color: green;
  font-size: 16px;
  font-weight: bold;
}
.menu li a:hover {
  border-bottom-color: green;
  color: #000;
  cursor: pointer;
  padding-bottom: 0;
  text-decoration: none;
}
.menu .ative {
  border-bottom-color: green;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="list-container">
  <div class="container">
    <div class="row no-gutters">
      <ul class="menu">
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Views: 2189

Answers (1)

kukkuz
kukkuz

Reputation: 42352

Add the hover to the li instead of the a like this:

.menu li a {
  color: green;
  font-size: 16px;
  font-weight: bold;
}
.menu li:hover {
  border-bottom: 1px solid green;
}

See demo below and updated jsfiddle:

.menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  transition: all 200ms ease-out;
  padding: 0;
}
.menu li {
  align-items: center;
  border-bottom: 0 solid gray;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  height: 59px;
  justify-content: center;
  padding: 5px 0;
  background-color: yellow;
}
.menu li a {
  color: green;
  font-size: 16px;
  font-weight: bold;
}
.menu li:hover {
  border-bottom: 1px solid green;
}
.menu li:hover a {
  color: #000;
  cursor: pointer;
  padding-bottom: 0;
  text-decoration: none;
}
.menu .ative {
  border-bottom-color: green;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="list-container">
  <div class="container">
    <div class="row no-gutters">
      <ul class="menu">
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions