Creating dropdown menu on mouseover using css

Question

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;
}

If you put in the effort to post your code, you might as well post a fiddle too. Saves us the time of copying your code and making our own. — TreeTree
– TreeTree, Commented Dec 29, 2013 at 15:55

Pranav C Balan · Accepted Answer · 2013-12-29 15:53:51Z

1

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

answered Dec 29, 2013 at 15:53

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating dropdown menu on mouseover using css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related