CODEWITHSUNDEEP
htmlcssdrop-down-menu
Sonu
Sonu

Reputation: 187

Creating dropdown menu on mouseover using css

I'm trying to create a drop-down menu on mouseover using css. But it seems to be incorrect. I wanted to display the class .drop on mouseover on .menu. Can someone help me to correct?

HTML-file:

<div id="navi">
  <span class="menu"></span>
  <nav class="drop">
    <li>Home</li>
    <li>Time</li>
    <li>Contact</li>
  </nav>
</div>

CSS-file:

.menu{
  display:block;
  width:80px;
  height:80px;
  background-image:url(../images/menu.svg);
  background-size:cover;
  background-position:center;
}

.menu:hover{
  display:block;
  width:80px;
  height:80px;
  background-image:url(../images/menu2.svg);
  background-size:cover;
  background-position:center;
}

.drop{
  position:absolute;
  background:#000;
  margin:0;
  padding:10px;
  font-family: 'Exo 2', sans-serif;
  color:#FFF;
  visibility:hidden;
}

.menu:hover .drop{
  position:absolute;
  background:#000;
  margin:0;
  padding:10px;
  font-family: 'Exo 2', sans-serif;
  color:#FFF;
  visibility:visible;
}

Upvotes: 1

Views: 22568

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Try this

<div id="navi">
<span class="menu">dffdf</span>
    <nav class="drop">
        <li>Home</li>
        <li>Time</li>
        <li>Contact</li>
    </nav>
</div>


.menu{
display:block;
width:80px;
height:80px;
background-image:url(../images/menu.svg);
background-size:cover;
background-position:center;
}
 .menu:hover{
display:block;
width:80px;
height:80px;
background-image:url(../images/menu2.svg);
background-size:cover;
background-position:center;
  }

.drop{
position:absolute;
background:#000;
margin:0;
padding:10px;
font-family: 'Exo 2', sans-serif;
color:#FFF;
visibility:hidden;
}

.menu:hover+.drop,.drop:hover{
/*_________^_________^___________*/
position:absolute;
background:#000;
margin:0;
padding:10px;
font-family: 'Exo 2', sans-serif;
color:#FFF;
visibility:visible;
 }

FIDDLE

Upvotes: 1

Related Questions