Matthew Davis Matthew Davis - 3 months ago 7
CSS Question

css :hover not showing

I have a css menu that has drop downs that should work. I have built drop down menu's before, as well as worked with several css hover effects in the past. This menu is driving me crazy. I have researched other css:hover and css menu issues here on Stackoverflow, and it seems that the issue is mainly getting the css elements in the correct order, however, I am still not understanding where my problem is, and what Im doing wrong with the ordering. I have a deadline that I missed, and I just really need a second set of eyes.

Here is my css:

.megamenu>li>.megapanel{position:absolute;display:none;background:#ffffff;box-shadow: 0px 2px 4px #777; width:100.2%;top:33px;left:0px;z-index:99;padding:20px 30px 20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.megamenu>li>.megapanel:hover{display:block;}


I have tried different combinations on the css classes, as well as only using the .megapanel and .megapanel:hover

When I refresh my browser and hover over the menu, nothing happens. When I load the dev tools (in chrome) it doesn't show the :hover css in the css list. Im totally lost.

Here is the piece of affected html code:

<ul class="megamenu skyblue">
<li><a class="color1" href="index.php">Home</a></li>
<li class="grid"><a class="color2" href="#">Our Dogs</a>
<div class="megapanel">
<div class="row">
<div class="col1">
<div class="h_nav">
<ul>
<li><a href="sires.php">Males</a></li>
<li><a href="toy-females.php">Toy Females</a></li>
<li><a href="females-mini.php">Mini Females</a></li>
<li><a href="upcoming.php">Upcoming</a></li>
<li><a href="ref.php">Reference</a></li>
<li><a href="http://www.colorcountryaussies.com/pedigrees/pp_search.htm" target="_blank">Pedigrees</a></li>
<li><a href="past.php">Past Puppies</a></li>
</ul>
</div>
</div></div></div></li>


I realize I did not finish off the html here, my menu is super long and I did not want to put more than necessary in here. Im sure the solution is very simple and Im just overlooking it. Im really grateful for the help I can get.

Answer

You can't hover something that has display:none.

Move the hover trigger to the parent li

.megamenu > li >.megapanel {
  position: absolute;
  display: none;
  background: #ffffff;
  box-shadow: 0px 2px 4px #777;
  width: 100.2%;
  top: 33px;
  left: 0px;
  z-index: 99;
  padding: 20px 30px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.megamenu>li:hover >.megapanel {
  display: block;
}

.megamenu > li {
  position: relative;
}
.megamenu > li >.megapanel {
  position: absolute;
  display: none;
  background: #ffffff;
  box-shadow: 0px 2px 4px #777;
  width: 100.2%;
  top: 100%;
  left: 0px;
  padding: 20px 30px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.megamenu > li:hover >.megapanel {
  display: block;
}
<ul class="megamenu skyblue">
  <li><a class="color1" href="index.php">Home</a>
  </li>
  <li class="grid"><a class="color2" href="#">Our Dogs</a>
    <div class="megapanel">
      <div class="row">
        <div class="col1">
          <div class="h_nav">
            <ul>
              <li><a href="sires.php">Males</a>
              </li>
              <li><a href="toy-females.php">Toy Females</a>
              </li>
              <li><a href="females-mini.php">Mini Females</a>
              </li>
              <li><a href="upcoming.php">Upcoming</a>
              </li>
              <li><a href="ref.php">Reference</a>
              </li>
              <li><a href="http://www.colorcountryaussies.com/pedigrees/pp_search.htm" target="_blank">Pedigrees</a>
              </li>
              <li><a href="past.php">Past Puppies</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>