In this post i’ll create a simple menu with a drop down made 100% in CSS3. it’s very simple and great for designer that don’t want to use javascript.

First let’s create our html

<ul id="menu"> 
  <li>
    <a href="" title="">Link1</a>
  </li>
  <li>
    <a href="" title="">2</a>
    <ul>
      <li>
        <a href="" title="">2.1</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="" title="">3</a>
  </li>
  <li>
    <a href="" title="">4</a>
    <ul>
      <li>
        <a href="" title="">4.1</a>
      </li>
      <li>
        <a href="" title="">4.2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="" title="">5</a>
  </li>
  <li>
    <a href="" title="">6</a>
    <ul>
      <li>
        <a href="" title="">6.1</a>
      </li>
      <li>
        <a href="" title="">6.2</a>
      </li>
    </ul>
  </li>
</ul>

And now the CSS

ul{
  list-style:none;
}
ul li{
  float:left;
  padding:10px;
  bordeR:1px solid #ccc;
  width:8%;
}
ul li:hover ul{
  opacity: 1;
  height: auto;
}
ul li a{
  color:black;
  text-decoration:none;
}
ul li ul{
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -ms-transition: opacity 1s ease-out;
  -0-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;

  opacity: 0;
  height: 0;
  overflow: hidden;
}
ul li ul li{
  border:none;
  clear:both;
  width:100%;
}

As you can see, we set the a list inside a list and set it with the height with 0px and also opacity with 0px , it was done to make the inner list hidden, and we set the mouse hover on the element of the main list and change the inner list size and transparency.

This was already enough to make a drop down, now let’s add some animation on it, adding css3 transitions, this awesome tool let’s us to make real fantastic things, in this example is just a simple fade effect.

We set it on the element that will suffer the animation and change the values, in this case we change the opacity that was set with 0px before, the next value is the time of the animation and then the type of animation, in this example I used ease-out.

here is a list with all the type of animation that you can use.

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• bezier-cubic