Rahul Rajput | Technical blog

Simple CSS3 Dropdown Menu

Friday, May 15, 2015

If you simply want to show Dropdown Menu on mouse hover in your page without using javascript.
You can simply use the CSS property to show dropdown using :hover property.

The following Html/css code will show you how to implement a dropdown using the CSS.
1. Create a css file style.css
2. Create a Html File

CSS

#nav_wrap
{
 margin-top:15px
}

#nav_wrap ul
{
 list-style:none;
 position:relative;
 float:left;
 margin:0;
 padding:0;
 background-color: orange;
}

#nav_wrap ul a
{
 display:block;
 color:#fff;
 text-decoration:none;
 font-weight:700;
 font-size:12px;
 line-height:32px;
 padding:0 15px;
 font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
}

#nav_wrap ul li
{
 position:relative;
 float:left;
 margin:0;
 padding:0;
}

#nav_wrap ul li.current-menu-item
{
 background:#596AEA;
}

#nav_wrap ul li:hover
{
 background:#F58080;
}

#nav_wrap ul ul
{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 background:#596AEA;
 padding:0
}

#nav_wrap ul ul li
{
 float:none;
 width:200px;
}

#nav_wrap ul ul a
{
 line-height:120%;
 padding:10px 15px;
}

#nav_wrap ul ul ul
{
 top:0;
 left:100%;
}

#nav_wrap ul li:hover > ul
{
 display:block;
}

h1{
 text-shadow: 2px 2px #A8160B;
 color: #E39963;
}

Html

<html>
 <head>
   <link href="cssdropdown.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
<h1>Simple CSS Drop Down Menu</h1>
<nav id="nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      
      <li class="dir"><a href="#">Sub Menu 1</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
</nav>

</body>
</html>