Pure CSS Elegant Drop Menu And horizontal menu

Why do we love to use Drop Menu to display our navigation? Because, it saves space for our website. If you’re building a website with many categories, you need to use drop down menu technique for sure. We can find over internet a lot of tutorials show us how to build a Navigation with drop effect by using Javascript.  with this example, you will see a simplest way to build a same effect by using CSS only. With some CSS make-up, your menu will be elegant. Not sure which one is easiest, but for sure it’s the simplest menu comes with drop effect: horizontal and vertical navigation.

 

Step 1: HTML Code

 

As I said above, this tutorial comes with CSS only, you don’t need to include any javascripts to your tag

As code above, you see that all child items will be enclosed inside its Parent Item. We’re using 2 tiers of menu, and the structure of each one completed with Parent and Child is:

  • Parent Item 3

  • Step 2: CSS Code

    Ya! Look at CSS code below. I will organize CSS code into each applied part. CSS code for the hold Navigation and Parent Items is:

    /* Navigation */
    #navigation {
    list-style: none;
    font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    }

    /* CSS for each Parent Item */
    #navigation li
    {
    clear: both;
    height: 2em;
    }

    #navigation li a
    {
    float: left;
    display: block;
    padding: 4px;
    text-decoration: none;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-right: 10px;
    }

    /* Change background color and font color
    of parent items when mouse hover */
    #navigation li:hover a,
    #navigation li a:hover
    {
    background: #999;
    color: #fff;
    }

    Finally, we have to reset and re style the link inside each child item because the link already formatted above, you can find it inside css code block of Parent Item.

    /*
    Reset and re style
    link of each child item
    */
    #navigation li:hover ul li a,
    #navigation ul li a
    {
    display: inline;
    padding: 0 6px 0 0;
    float: none;
    text-transform: lowercase;
    color: #999;
    background: none;
    }

    #navigation li:hover ul li a:hover,
    #navigation ul li a:hover
    {
    background: none;
    color: #000;
    }

    That’s all we need to make the Navigation works.

     

    Leave a comment