polished Drop Menu with CSS only make the build

Why can we like to use Drop Menu to show our navigation? as a result of, it saves house for our web site. If you’re building an internet site with several classes, you would like to use sink menu technique evidently. we are able to realize over net plenty of tutorials show North American country the way to build a Navigation with drop result by victimization JavaScript. Today, with this tutorial, you'll see a easiest method to create a same result by victimization CSS solely. With some CSS make-up, your menu are going to be elegant. undecided that one is best, except for certain it’s the best menu comes with drop effect: horizontal and vertical navigation.

Step 1: HTML Code

As I same on top of, this tutorial comes with CSS solely, you don’t have to be compelled to embrace any JavaScript to your  tag

  <ul id="navigation">
    <li class=""> <a href="#">Parent Item 1</a> </li>
    <li class=""> <a href="#">Parent Item 2</a>
      <ul>
        <li class=""> <a href="#">Child Item 1</a> </li>
        <li class=""> <a href="#">Child Item 2</a> </li>
        <li class=""> <a href="#">Child Item 3</a> </li>
        <li class=""> <a href="#">Child Item 4</a> </li>
        <li class=""> <a href="#">Child Item 5</a> </li>
      </ul>
    </li>
    <li class=""> <a href="#">Parent Item 3</a>
      <ul>
        <li class=""> <a href="#">Child Item 1</a> </li>
        <li class=""> <a href="#">Child Item 2</a> </li>
      </ul>
    </li>
    <li class=""> <a href="#">Parent Item 4</a> </li>
  </ul>

Step 2: CSS Code

Ya! consider CSS code below. i will be able to organize CSS code generator into every applied half. CSS code for the hold Navigation and Parent things 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've to reset and re vogue the link within every kid item as a result of the link

 already formatted higher than, you'll be able to realize it within 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 want to create the Navigation works.

[smart ads]

In this CSS tutorials, I solely show you ways to create the horizontal drop. you'll simple to try to to a similar with sink vertical menu result by downloading my code.