Pure CSS Dropdown Menu

This is about creating drop down menu without any script. This can also be created by using pure CSS.

Basically there are two ul list are used to create the drop down menu. First ul list contains the parent menu and the second ul contains the child menu links.

Here is the code

HTML

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a>
    <ul>
    <li><a href="">About 1</a></li>
    <li><a href="">About link 2</a></li>
    <li><a href="">About 3</a></li>
    </ul>
  </li>
  <li><a href="">Products</a>
    <ul>
    <li><a href="">Product 1</a></li>
    <li><a href="">Product 2</a></li>
    <li><a href="">Product 3</a></li>
    <li><a href="">Product 4</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a>
    <ul>
    <li><a href="">Contact 1</a></li>
    <li><a href="">Contact 2</a></li>
    <li><a href="">Contact 3</a></li>
    </ul>
  </li>
</ul>​

CSS

ul {   
    font-family: Arial, Verdana;   
    font-size: 14px;   
    margin: 0;   
    padding: 0;   
    list-style: none; 
}
ul li { 
       display: block;  
       position: relative;  
       float: left; 
}
li ul {
      display: none; 
}
ul li a {   
    width:80px; 
    display: block;   
    text-decoration: none;   
    color: #ffffff;   
    border-top: 1px solid #ffffff;   
    padding: 5px 15px 5px 15px;   
    background: #2C5463;   
    margin-left: 1px;   
    white-space: nowrap; 
}
ul li a:hover { 
      background: #617F8A;
 } 
li:hover ul {   
       display: block; /*This opens the hidden ul list*/  
       position: absolute; 
} 
li:hover li {   
       float: none;   
       font-size: 11px;
 } 
li:hover a { 
       background: #617F8A; 
} 
li:hover li a:hover {
       background: #95A9B1; 
}​

Check the demo here.

Browser compatibility : This works in IE7+ and all the modern browsers.

CSS Selectors

Here is the list of useful CSS selectors.

> Sign:

> Symbol target elements which are direct children of a parent element.

HTML

<div id="container">

   <p>First</p>

    <div>

        <p>Child Paragraph</p>

    </div>

   <p>Second</p>

   <p>Third</p>

</div>​

CSS

div#container > p {

  border: 1px solid black;

}

DEMO: http://tinkerbin.com/H1RHLL6O

It will target all P elements which are direct children of parent div, not children of child div.

+ Sign:

This sign is adjacent sibling combinator.

The elements in the selector have the same parent, and the second one must come immediately after the first.

For example let’s say you want to add text-color for all p tags which comes inside the child div but not inside the main parent div.

HTML

<div id="container">

   <p>First</p>

    <div>

        <p>Child Paragraph</p>

    </div>

   <p>Second</p>

   <p>Third</p>

</div>​

CSS

div + p {

   color: red; font-weight:bold

}

DEMO: http://tinkerbin.com/IHp6xFVX

~ Sign:

This is general sibling combinator and similar to Adjacent sibling combinator. The difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.

HTML

<div id="container">

   <p>First</p>

    <div>

        <p>Child Paragraph</p>

    </div>

   <p>Second</p>

   <p>Third</p>

</div>​

CSS

div ~ p{

background-color:blue; color:white

}

DEMO: http://tinkerbin.com/OTn0tM6V

:NTH-CHILD

The :nth-child() pseudo-class can be used to target one or more specific children of parent element.

For example if you want to give different style only for the particular li item then you can do it with nth-child

HTML

<ul>

  <li>Link 1</li>

  <li>Link 2</li>

  <li>Link 3</li>

  <li>Link 4</li>

  <li>Link 5</li>

</ul>

CSS

ul li:nth-child(3) {

    color: red;

  }

DEMO: http://tinkerbin.com/AMmRI4gA

Likewise below are the other methods of the nth-child() pseudo-class.

:NTH –CHILD()

:nth-child(odd) and :nth-child(even)

This method adds styles to alternative elements.

HTML

<ul>

    <li>test</li>

    <li>test</li>

    <li>test</li>

    <li>test</li>

    <li>test</li>

</ul>​

CSS

li:nth-child(odd){

    background-color:green; color:white

}

li:nth-child(even){

    background-color:yellow;

}​

DEMO: http://jsfiddle.net/XUNg3/9/