CODEWITHSUNDEEP
htmlcss
evans
evans

Reputation: 563

wrong behavior with :hover

When you hover over the area <li> it becomes red, but the area inside the <a> remains white. Area <a> turns red when I point at her. This happens separately.

How to fix this? How to make the hover area <li> the entire field had turned red?

.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}
.menu * {
  text-decoration: none;
  font-size: 16px;
  background-color: #fff;
}
.menu ul {
  margin: 0;
  padding-left: 10px;
  list-style: none;
}
.menu ul li {
  padding: 3px 0px 3px 10px;
  color: #000;
  display: block;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li a {
  display: block;
  color: #000;
}
.menu ul li:hover {
  background: #e50003;
}
.menu ul li.active > a {
  text-decoration: none;
}
.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
  background: #e50003;
}
.menu ul li .submenu {
  display: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
  border-width: 0px 0px 0px 1px;
  border-style: solid;
  border-color: #bbb;
}
.menu ul li:hover > .submenu {
  background-color: white;
  display: block;
  position: absolute;
  left: 220px;
  width: 250px;
  top: 0;
  z-index: 99;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
<div class="menu">
  <ul>
    <li class="active">
      <a href="#">Пункт 1</a>
      <div class="submenu submenu1">
        <ul>
          <li class="active">
            <a href="#">Пункт 2</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Upvotes: 2

Views: 248

Answers (4)

Arindam
Arindam

Reputation: 583

Above you got the right answer. Just to tag, looks like there is an enhancement to make the width of Red part is changing once hovering. Change is width should be 220px under .menu like below.

.menu {
  z-index: 100;
  width: 220px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

You need to set child element's background while hovering on parent element, which is in your case.

.menu ul li:hover,
.menu ul li:hover > a{
  background: #e50003;
  color: #fff;
}


.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}
.menu * {
  text-decoration: none;
  font-size: 16px;
  background-color: #fff;
}
.menu ul {
  margin: 0;
  padding-left: 10px;
  list-style: none;
}
.menu ul li {
  padding: 3px 0px 3px 10px;
  color: #000;
  display: block;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li a {
  display: block;
  color: #000;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li:hover,
.menu ul li:hover > a{
  background: #e50003;
  color: #fff;
}
.menu ul li.active > a {
  text-decoration: none;
}
.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
}
.menu ul li .submenu {
  display: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
  border-width: 0px 0px 0px 1px;
  border-style: solid;
  border-color: #bbb;
  
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li:hover > .submenu {
  background-color: white;
  display: block;
  position: absolute;
  left: 220px;
  width: 250px;
  top: 0;
  z-index: 99;
}
<div class="menu">
  <ul>
    <li class="active">
      <a href="#">Пункт 1</a>
      <div class="submenu submenu1">
        <ul>
          <li class="active">
            <a href="#">Пункт 2</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Upvotes: 0

Alfin Paul
Alfin Paul

Reputation: 1621

.menu ul li.active > a:hover,
.menu ul li.active > a
{
background-color:transparent;
}

Upvotes: 0

Marco Salerno
Marco Salerno

Reputation: 5203

You just need to remove those:

.menu * {
  background-color: #fff;
}

.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
  background: #e50003;
}


.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}
.menu * {
  text-decoration: none;
  font-size: 16px;
  /* background-color: #fff; */
}
.menu ul {
  margin: 0;
  padding-left: 10px;
  list-style: none;
}
.menu ul li {
  padding: 3px 0px 3px 10px;
  color: #000;
  display: block;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li a {
  display: block;
  color: #000;
}
.menu ul li:hover {
  background: #e50003;
}
.menu ul li.active > a {
  text-decoration: none;
}
/*.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
  background: #e50003;
}*/
.menu ul li .submenu {
  display: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
  border-width: 0px 0px 0px 1px;
  border-style: solid;
  border-color: #bbb;
}
.menu ul li:hover > .submenu {
  background-color: white;
  display: block;
  position: absolute;
  left: 220px;
  width: 250px;
  top: 0;
  z-index: 99;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
<div class="menu">
  <ul>
    <li class="active">
      <a href="#">Пункт 1</a>
      <div class="submenu submenu1">
        <ul>
          <li class="active">
            <a href="#">Пункт 2</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Upvotes: 3

Related Questions