title: How to create DropDown MenuBar using CSS
body: <p>I am trying to make my own Dropdown Menu Bar.To start with i have created Menubar with Tabs and added some CSS effects in it.Now i want to add Submenus which should be Visible on MouseHover on a specific Bar or Tab but not able to do it..</p>
  
  <p>Here is the HTML..</p>
  
  <pre><code>&lt;ul id="dropdown_nav"&gt;
      &lt;li&gt;
          &lt;a class="first" href="#" style="font-size: 12px; margin-left: 165px;"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#" style="font-size: 12px;"&gt;Tutorials&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#" style="font-size: 12px;"&gt;Artciles&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#" style="font-size: 12px;"&gt;Freebies&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a class="last" href="#" style="font-size: 12px;"&gt;Other Stuff&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is the CSS..</p>
  
  <pre><code>a {
      color:#525252;
      text-decoration:none;
  }
  #dropdown_nav {
      height: 35px;
      margin:0;
      padding:0;
      width:100%;
      padding:0px;
      display:inline-block;
      list-style:none;
      -moz-box-shadow:inset 0px 0px 1px #fff;
      -webkit-box-shadow:inset 0px 0px 1px #fff;
      border:1px solid #ccc;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      background: lightgray;
  }
  #dropdown_nav li {
      padding-top: 4px;
      float:left;
      position:relative;
      display:inline-block;
  }
  #dropdown_nav li a {
      padding:12px 45px 10px 45px;
      border-right:1px solid #ccc;
  }
  #dropdown_nav li a:hover {
      background:#00a1e4;
      color: white;
  }
  </code></pre>