Menu active list item height

user_13099741 0
Viewed 25

I have a menu on a grey background container that works as expected. The only problem is when the list element is active, the darker color background of the active list element does not take up the whole height of the menu container. I have no idea how to make it work.

My code:

<div class="main-menu">
    <ul>
        <li><a href="">Item 1</a></li>
        <li class="active"><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
        <li><a href=""><span style="border: none">Item 6</span></a></li>
    </ul>
</div>

The css:

.main-menu{
  background: transparent linear-gradient(180deg,rgba(255,255,255,1) 0,rgba(228,228,228,1) 100%) 0 0 no-repeat padding-box;
  height: 46px;
  width: 100%;
}
.main-menu ul {
  list-style: none;
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.main-menu ul li{
  float: left;
  height: 46px;
}
.main-menu li a {
  text-decoration: none;
  padding: 0 15px;
  border-left: 1px solid #D8D8D8;
  text-transform: uppercase;
  font-family: 'Open Sans',sans-serif!important;
  font-weight: bold!important;
  font-size: 13px;
  text-transform: uppercase;
  color: #4E4E4E;
  line-height: 30px;
  display: block;
  margin-top: 10px;
}
.main-menu ul li:first-child a{
  border: none;!important
}
.main-menu li:hover {
  background: #D8D8D8;
}
.main-menu li:hover a{
  font-weight: 800;
  color: #000;
}
.main-menu li:hover + li a {
  border-left: 0 none;
  margin-left: 1px;

}
.main-menu a.active {
  background: #D8D8D8;
  font-weight: 800;
  color: #000;
  
}

Any ideas would be very much appreciated. Thanks

css html
2 Answers

I changed the gradient color and your code seems to be working without problems.
I know it looks like it isn't filled correctly, and that's because the top of the gradient has the same color as the background. You can easily change the background or gradient color to see what I mean.

user_73303160

I actually found the answer to my question. Posting the code so it could be of use to someone.

The css:

.main-menu{
  background: transparent linear-gradient(180deg,rgba(255,255,255,1) 0,rgba(228,228,228,1) 100%) 0 0 no-repeat padding-box;
  height: 46px;
  width: 100%;
}
.main-menu ul {
  list-style: none;
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.main-menu ul li{
  float: left;
  height: 46px;
}
.main-menu li a {
  text-decoration: none;
  padding: 0 15px;
  border-left: 1px solid #D8D8D8;
  text-transform: uppercase;
  font-family: 'Open Sans',sans-serif!important;
  font-weight: bold!important;
  font-size: 13px;
  text-transform: uppercase;
  color: #4E4E4E;
  line-height: 30px;
  display: block;
  margin-top: 10px;
}
.main-menu ul li:first-child a{
  border: none;!important
}
.main-menu li:hover {
  background: #D8D8D8;
}
.main-menu li:hover a{
  font-weight: 800;
  color: #000;
}
.main-menu li:hover + li a {
  border-left: 0 none;
  margin-left: 1px;

}
.main-menu li.active {
  background: #D8D8D8;
}
.main-menu li.active + li a {
  border-left: 0 none;
  margin-left: 1px;

}
.main-menu li.active a{
  font-weight: 800;
  color: #000;
}
user_130997410
Related