CODEWITHSUNDEEP
htmlcssdrop-down-menuhover
user9067009
user9067009

Reputation:

Can't make drop-down hover work

I am trying to make a drop-down menu that drops from image but I can't seem to make it work. How should I target the hover? Because everything I am trying is not working. How I am trying to initiate hover effect is shown at the end of CSS.

.area-left {
  float: left;
}

.menu-icon {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 5px;
}

.menu-icon hr {
  border: 2px solid #A5CF4C;
  border-radius: 100px;
  margin-top: 3px;
  margin-bottom: 4px;
  margin-right: 5px;
  margin-left: 3px;
}

.area-left .menu li:hover {
  background-color: rgba(165, 207, 76, 0.4);
}

.logo img {
  vertical-align: middle;
  margin-top: 2px;
}

.sub-menu ul {
  background-color: rgba(255, 255, 255, 0.8);
}

.sub-menu li {
  border: 1px solid green;
  padding: 0px 5px;
}

.sub-menu .menu li:first-child {
  margin-top: 3px;
}

.sub-menu ul li {
  display: none;
}

.logo img:hover .sub-menu ul li {
  display: block;
}
<div class="area-left">
  <ul id="htc-menu" class="parent-menu">
    <li class="logo ico-container">
      <div class="menu-icon">
        <hr/>
        <hr/>
        <hr/>
      </div><img src="images/logo.png" alt="HTC Logo"></li>
    <li class="sub-menu">
      <ul class="menu">
        <li><a href="http://www.htc.com/us/smartphones-learn/">smartphones</a></li>
        <li><a href="http://www.htc.com/us/accessories/">accessories</a></li>
        <li><a href="https://www.vive.com/us/">virtual reality</a></li>
        <li><a href="http://www.htc.com/us/fitness/ua-healthbox/">fitness</a></li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 92

Answers (2)

AuRise
AuRise

Reputation: 2472

Try this :)

I purposely did not go with the adjacent CSS selector because once your mouse moves off the menu icon, the menu would disappear again, making it unhelpful. So you'll want to target the hover state of the parent element so that the menu remains visible while the mouse moves from the logo to the menu that just appears.

.area-left {
  float: left;
}

.menu-icon {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 5px;
}

.menu-icon hr {
  border: 2px solid #A5CF4C;
  border-radius: 100px;
  margin-top: 3px;
  margin-bottom: 4px;
  margin-right: 5px;
  margin-left: 3px;
}

.area-left .menu li:hover {
  background-color: rgba(165, 207, 76, 0.4);
}

.logo img {
  vertical-align: middle;
  margin-top: 2px;
}

.sub-menu ul {
  background-color: rgba(255, 255, 255, 0.8);
}

.sub-menu li {
  border: 1px solid green;
  padding: 0px 5px;
}

.sub-menu .menu li:first-child {
  margin-top: 3px;
}

.sub-menu ul li {
  display: none;
}

.logo img:hover .sub-menu ul li {
  display: block;
}


/* Tessa's Changes */

#htc-menu {
  list-style: none;
}

#htc-menu:hover li.sub-menu ul.menu li {
  display: block;
}
<div class="area-left">
  <ul id="htc-menu" class="parent-menu">
    <li class="logo ico-container">
      <div class="menu-icon">
        <hr/>
        <hr/>
        <hr/>
      </div><img src="images/logo.png" alt="HTC Logo">
    </li>
    <li class="sub-menu">
      <ul class="menu">
        <li><a href="http://www.htc.com/us/smartphones-learn/">smartphones</a></li>
        <li><a href="http://www.htc.com/us/accessories/">accessories</a></li>
        <li><a href="https://www.vive.com/us/">virtual reality</a></li>
        <li><a href="http://www.htc.com/us/fitness/ua-healthbox/">fitness</a></li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 2

Jerome Indefenzo
Jerome Indefenzo

Reputation: 967

You're trying to access the .sub-menu as a child of .logo, despite them being siblings of each other.

Try:

.logo:hover + .sub-menu ul li  {
    display: block;
}

Or just:

#htc-menu:hover .sub-menu ul li  {
    display: block;
}

Upvotes: 2

Related Questions