CODEWITHSUNDEEP
htmlcss
Mac Hooper
Mac Hooper

Reputation: 115

Dropdown menu positioning and styling

How do I make it so that the hover effects are full width of the dropdown and so that the text changes colour on hovering on the li not the a.

So it should be a black dropdown menu, when each link is hovered on the background of the li should change to rgba(255,255,255, 0.1) and the text should change to rgba(102,245,66, 0.8) the li and a sections shouldn't overflow the normal dropdown section (I tried overflow: hidden)

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1c1c1c;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
  height: 300px;
  position: absolute;
  right: 0;
  top: 100;
}

ul {
  list-style: none;
  overflow: hidden;
}

li {
  font-size: 1em;
  text-align: center;
  padding-top: .5em;
  height: 75px;
  width: 240px;
  overflow: hidden;
}

a {
  color: #fff;
  text-decoration: none;
  font-size: 2rem;
  font-family: $main-font;
  width: 240px;
}

a:hover {
  color: rgba(102, 245, 66, 0.8);
}

li:hover {
  background: rgba(255, 255, 255, .2);
  color: #8FC3A1;
  width: 240px;
  cursor: pointer;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="dropdown">
  <span><i class="fa fa-bars">Just hover on it</i></span>
  <div class="dropdown-content">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#lin">Line Up</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</div>

Upvotes: 0

Views: 69

Answers (1)

Awais
Awais

Reputation: 4902

I think you are looking for this i m not pretty much sure, please do let me know if it fulfills you requirement, the solution is change color of a when we hover li 

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1c1c1c;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 0;
  z-index: 1;
  height: 300px;
  position: absolute;
  right: 0;
      left: 0;
}

ul {
  list-style: none;
  overflow: hidden;
  margin: 0;
    padding: 0;
}

li {
    font-size: 1em;
    text-align: center;
    margin-bottom: 10px;
}

li:hover {
  background: rgba(255,255,255, 0.1);
  color: #8FC3A1;
  cursor: pointer;
}
li:hover a{
  color: rgba(102,245,66, 0.8)
}


a {
  color: #fff;
  text-decoration: none;
  font-size: 2rem;
  font-family: $main-font;
  width: 240px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
<div class="dropdown">
  <span><i class="fa fa-bars">fa-bar dropdown</i></span>
  <div class="dropdown-content">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#lin">Line Up</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</div>

Upvotes: 1

Related Questions