This post is also avaliable in portuguese: http://tribodoci.net/artigos/menu-dropdown-css

Its very common to see websites using dropdown menus, though this kind of menu is a little bad experience when we talking about mobile world. Well, if you want a menu like that in your website, follow the steps below and make your own dropdown menu, using only CSS.

First, define your links on HTML:

  <nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li>
      <a href="#">Tutoriais</a>
      <ul>
        <li><a href="#">Php</a></li>
        <li><a href="#">Java</a></li>
        <li>
          <a href="#">SQL</a>
          <ul>
            <li><a href="#">PostgreSQL</a></li>
            <li><a href="#">MySql</a></li>
          <ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Redes Sociais</a>
      <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
      </ul>
    </li>
    <li><a href="#">Sobre</a></li>
  </ul>
</nav>

Now see that the menu looks like that:

  • Inicio
  • Tutoriais
    • Php
    • Java
    • SQL
      • PostgreSQL
      • MySql
  • Redes Sociais
    • Facebook
    • Twitter
  • Sobre

Now that we saw the links hierarchy, we can go to CSS (All of this code could be adapted to your layout)

  ul {
    position: absolute;
    margin: 0;
    list-style:none;
}

li {
    display: inline-block;
    padding: 5px 10px;
    position: relative;
}

We setted the inicial configuration of all lists(ul) and its elements (li). The position absolute gives more independency to the lists and sublists. Now lets go to the key-style of menu.

  li:hover > ul {
    display: block;
}

Now we are telling the browser that, when we pass the mouse over a list item (li), its sublist (>ul) will be shown (display block). But first we must let them invisible (display none)

  ul ul {
    position: absolute;
    display: none;
    margin: 0;
    padding: 5px 10px;
}
ul ul li {
    display: block;
}

Now our menu is already working, but if you want to make the third level works better, you must add the style below

  ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

The code above makes the 3ยบ level of the menu be shown beside its father item. See the result below.


11,254 0 6