Not able to apply display property on li element

Question

i am a newbie to CSS,HTML and trying to understand lists.however something confuses me .As you can see below my HTML i am trying to create a drop down navigation bar.what i don't understand is why would display property won't work on a single li element.

 
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}

.hidden {display:none;}
.home:hover .hidden{display:block;}
.hidden a:hover{background-color: #f1f1f1;}

 
<body>
<ul class="block1">  
  <li class="home"><a href="#">Home</a>
 
   <li class="hidden">
  <a  href="#">contact us</a>
    </li>
  
  <li><a href="#">about</a><li>
  <li><a href="#">Investor</a></li>
  <li> <a href="#">what we do</a></li>
  </li>
   </ul> 

</body>

It is working.. please expand on the issue and/or show us what you are seeing. — Squeakasaur, Apr 01 '17 at 21:02
.home:hover ~ .hidden{display:block;} add this it will work. But this is not appropriate to make a dropdown menu as you maintain on your question. — Baezid Mostafa, Apr 01 '17 at 21:13

score 1 · Answer 1 · edited May 23 '17 at 11:46

Here is the new css you should use:

.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}

.hidden{display:none;}
.home:hover + .hidden{display:block;}
li:hover{background-color: #f1f1f1;}

Then your html should look like this:

<body>
<ul class="block1">  
<li class="home"><a href="#">Home</a></li>

   <li class="hidden" >
  <a  href="#">contact us</a>
    </li>

  <li><a href="#">about</a></li>
  <li><a href="#">Investor</a></li>
  <li> <a href="#">what we do</a></li>
   </ul> 

</body>

Nothing too wrong with your html, just a mismatch <li>, and the css you want to look at this post: Using only CSS, show div on hover over <a>

Here is the JSFiddle: Example of OP Code

Not sure if OP cares at thus point, but what do you mean? Looks good on the jsfiddle. — mossherder, Apr 03 '17 at 16:10

repzero · Answer 2 · 2017-04-01T21:14:15.063

i don't understand is why would display property won't work on a single li element.

The div with class .home is not the parent of li tag with class hidden. Hence it will never trigger a hover over that. Whenever you trigger a hover over a parent container it trickles down and find its children and does some sort of styling.

In your case, you are trying to use display:none to hide a li and make it display by means of hover.

Consider the snippet below, whenever you hover over the parent container, the li tag is being displayed. (This approach below does not make a drop down menu for you but it is give you some insight how to make that display property change on hover)

.block1 {
  background-color: #736570;
  margin: 0px;
}

ul a {
  color: white;
}

ul li {
  list-style-type: none;
  padding: 5px;
}

.hidden {
  display: none;
}

.block1:hover .hidden {
  display: block;
}

.hidden a:hover {
  background-color: #f1f1f1;
}

.home

<html>

<body>
  <ul class="block1">
    <li class="home"><a href="#">Home</a>

      <li class="hidden">
        <a href="#">contact us</a>
      </li>

      <li><a href="#">about</a>
        <li>
          <li><a href="#">Investor</a></li>
          <li> <a href="#">what we do</a></li>
        </li>
  </ul>

</body>

</html>

Not able to apply display property on li element

2 Answers2