CODEWITHSUNDEEP
htmlcss
Zahra
Zahra

Reputation: 159

display: none; to display: block; won't work

So, I have this list where only the first item in the list is visible. I want to be able to see other items when I hover on the first item. bellow is my code but it doesn't work. After hovering, nothing happens.

This is the list:

#manage {
  float: right;
  padding: 0px;
  margin: 0px;
}
#manage li {
  width: 100px;
  height: 30px;
  background-color: Aqua;
  text-align: center;
  list-style-type: none;
}
#header ul a {
  font-size: 25px;
  font-weight: normal;
  padding: 0px;
  margin: 0px;
  text-decoration: none;
  color: White;
}
.sub {
  margin-top: 3px;
  display: none;
}
li:hover .sub {
  display: block;
}
<ul id="manage">
  <li><a href="#">managment</a>
  </li>
  <li class="sub"><a href="#">Add</a>
  </li>
  <li class="sub"><a href="#">Edit</a>
  </li>
  <li class="sub"><a href="#">Account</a>
  </li>
</ul>

Upvotes: 0

Views: 1580

Answers (3)

Simon West
Simon West

Reputation: 3788

One minor adjustment to your CSS can get this to work.

If you target your first li for the hover, not only does the current CSS selector attempt to select child elements rather than sibling elements, but your elements are going to immediately disappear when you hover over any of the now visible li elements, so re-target your CSS selector to your parent ul#manage element.

#manage:hover  .sub
{
    display:block;
}


#manage
{
    float:right;
    padding:0px;
    margin:0px;
}
#manage li
{
    width:100px;
    height:30px;
    background-color:Aqua;
    text-align:center;
    list-style-type:none;
}

#header ul a
{
    font-size:25px;
    font-weight:normal;
    padding:0px;
    margin:0px;
    text-decoration:none;
    color:White;
}

.sub 
{
    margin-top:3px;
    display:none;
}
#manage:hover > .sub
{
    display:block;
}
<ul id="manage">
        <li><a href="#">managment</a></li>
        <li class="sub"><a href="#">Add</a></li>
        <li class="sub"><a href="#">Edit</a></li>
        <li class="sub"><a href="#">Account</a></li>
        </ul>

Upvotes: 2

Little Santi
Little Santi

Reputation: 8793

Your mistake is in the last rule:

li:hover .sub

Try instead:

ul:hover li.sub

Upvotes: 0

Collins Abitekaniza
Collins Abitekaniza

Reputation: 4578

Try adding those list items in an unordered list inside the first list item

<ul id="manage">
    <li><a href="#">managment</a>
        <ul class="sub">
             <li><a href="#">Add</a></li>
             <li><a href="#">Edit</a></li>
             <li><a href="#">Account</a></li>
        </ul>
    </li>
 </ul>

And in your css

.sub 
{
    margin-top:3px;
    display:none;
}
li:hover .sub
{
    display:block;
}

Upvotes: 0

Related Questions