Hover over li not displying div

Question

I have ol in my header of the page. In last two there is an Username and profile pic. And I want to show dropdown menu on hover over username or profile pic. But it is not displaying menu on hover. There is one lebel inside my dropdown-content.In mozilla it is not showing anything on hover and in chrome it is also not showing on hover but by default it is showing label.

.head{
    top:0;
    background:#424242;
    padding:1px;
    height:10%;
}
li{
     display:inline-block;
     color:#E0E0E0;
     cursor:pointer;
     padding:10px 10px 2px 10px;
     font-size:20px;
}
li:hover{
    color:white;
}
li.active{
    color:white;
    border-bottom:1px solid white;
    
}
.right{
    float:right;
    color:white;
}
#profilepic{
    border-radius:50%;
    width:40px;
    height:40px;
    margin:-10px 50px 0 20px;
}

.dropdown-content {
    display:none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 150px;
    right:0;
    margin-right:20px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content label {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content label:hover {background-color: #ddd;}

.right:hover .dropdown-content {display: block;}

<div class="head">
            <ul>
                <li>HOME</li>
                <li onClick="NewApplication();">NEW APPLICATION</li>
                <li onClick="PendingApplication();">PENDING APPLICATION</li>
                <li onClick="Customer();">APPROVED</li>
                <li>LOAN STRUCTURE</li>
                <li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
                <li class="right">ABC</li>
            </ul>
            <div class="dropdown-content">
                <label onClick="Setting();">SETTINGS</label>
            </div>
        </div>

Welcome to SO, Please add your code into snippet, So someone has quickly fixed your issue — jaydeep patel, Aug 13 '18 at 08:59
You would need javascript or jQuery for this. CSS cannot reference parent selectors. — Allan Jebaraj, Aug 13 '18 at 09:04
`.dropdown-content` is not a descendant of `.right` so your selector `.right:hover .dropdown-content` is incorrect. — Turnip, Aug 13 '18 at 09:05

score 0 · Answer 1 · answered Aug 13 '18 at 09:07

Please restructure your html like so, this will be ideal for showing the dropdown.

The below class will be used to show the hidden dropdown.

.show-settings:hover .dropdown-content {
  display: block;
}

.right {
  float: right;
  color: black;
  position:relative;
}

#profilepic {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: -10px 50px 0 20px;
}

.show-settings:hover .dropdown-content {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  right: 0;
  margin-right: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  overflow: hidden;
}

.dropdown-content label {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content label:hover {
  background-color: #ddd;
}

<div class="head">
  <ul>
    <li>HOME</li>
    <li onClick="NewApplication();">NEW APPLICATION</li>
    <li onClick="PendingApplication();">PENDING APPLICATION</li>
    <li onClick="Customer();">APPROVED</li>
    <li>LOAN STRUCTURE</li>
    <li class="right show-settings">
      <img id="profilepic" src="http://via.placeholder.com/50x50"> username
      <div class="dropdown-content">
        <label onClick="Setting();">SETTINGS</label>
      </div>
    </li>
  </ul>
</div>

Ok now my edit also working and ur code too. It was cache problem. — user10184882, Aug 13 '18 at 09:27

Chayim Friedman · Answer 2 · 2018-08-13T10:16:49.397

Putting space between two CSS selctors (.class1 .class2), specify that you want a hirarchy - when .class2 is nested inside class1. You can't by CSS only to get the parent of an element. So, to solve your problem, you should do it by js, or including .dropdown-content inside the <ul> element (change it from <div> to <li>, because inside lists only <li> elements are valid), and then access it by CSS3's general sibling selector (or by CSS3's adjacent sibling selector, I don't use it here):

Solution 1:

.right {
  float: right;
}

#profilepic {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: -10px 50px 0 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  right: 0;
  margin-right: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content label {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content label:hover {
  background-color: #ddd;
}

.right:hover ~ .dropdown-content, /* or ".right:hover + .dropdown-content" with adjacent sibling selector */
.dropdown-content:hover /* For the dropdown won't disappear when hover it */ {
  display: block;
}

<div class="head">
  <ul>
    <li>HOME</li>
    <li onClick="NewApplication();">NEW APPLICATION</li>
    <li onClick="PendingApplication();">PENDING APPLICATION</li>
    <li onClick="Customer();">APPROVED</li>
    <li>LOAN STRUCTURE</li>
    <li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
    <li class="right">ABC</li>
    <li class="dropdown-content">
      <label onClick="Setting();">SETTINGS</label>
    </li>
  </ul>
</div>

Solution 2:

window.onload = function() {
  var dropdown = document.querySelector('.dropdown-content');
  
  document.querySelectorAll('.right').forEach(function(el) {
    el.addEventListener('mouseover', function() {
      dropdown.style.display = 'block';
    }, false);
    el.addEventListener('mouseout', function() {
      dropdown.style.display = 'none';
    }, false);
  });
};

.right {
  float: right;
}

#profilepic {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: -10px 50px 0 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  right: 0;
  margin-right: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content label {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content label:hover {
  background-color: #ddd;
}

<div class="head">
            <ul>
                <li>HOME</li>
                <li onClick="NewApplication();">NEW APPLICATION</li>
                <li onClick="PendingApplication();">PENDING APPLICATION</li>
                <li onClick="Customer();">APPROVED</li>
                <li>LOAN STRUCTURE</li>
                <li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
                <li class="right">ABC</li>
            </ul>
            <div class="dropdown-content">
                <label onClick="Setting();">SETTINGS</label>
            </div>
        </div>

Its not working in chrome – user10184882 Aug 13 '18 at 09:22 — user10184882, Aug 13 '18 at 09:22
@user10184882 Solution 1 or 2? – Chayim Friedman Aug 13 '18 at 10:06 — Chayim Friedman, Aug 13 '18 at 10:06
@user10184882 I fixed an issue with Solution 2. – Chayim Friedman Aug 13 '18 at 10:13 — Chayim Friedman, Aug 13 '18 at 10:13

Hover over li not displying div

2 Answers2