CODEWITHSUNDEEP
htmlcsscss-transitions
Jonathan Evans
Jonathan Evans

Reputation: 43

CSS Problems with increasing menu height on hover

I'm trying to create a horizontal menu that increases in height and displays a vertical list when you hover over it. If there is a way to make a smooth transition when the menu increases in height that would be nice too.

#nav {
  width: 100%;
  height: 20px;
  background-color: #989898;
}
#nav:hover {
  height: 80px;
}
#nav li {
  display: inline;
  padding: 15px;
}
#nav a {
  color: black;
  text-decoration: none;
}
<div id="nav">
  <ul>
    <li><a href="#">Item 1</a>
    </li>
    <li><a href="#">Item 2</a>
    </li>
    <li><a href="#">Item 3</a>
    </li>
  </ul>
</div>

Here's a gif demonstration of what I want to do:

enter image description here

Upvotes: 4

Views: 2913

Answers (3)

vishalkin
vishalkin

Reputation: 1235

Check out this example: its similar to what u want...

Link

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240868

Something like this?

jsFiddle demo here

-webkit-animation: move .5s;
-webkit-animation-fill-mode: forwards;

@-webkit-keyframes "move" {
 100% {
   height:80px;
 }
}

Upvotes: 1

Hive7
Hive7

Reputation: 3675

I added this code to yours to make it animate:

-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;

Here is a fiddle:

http://jsfiddle.net/Hive7/7HS8p/

Upvotes: 2

Related Questions