menu
Ad goes here

Sunday, 9 September 2012

CSS dropdown menu without JavaScript

If you are looking for CSS dropdown then this will be the best dropdown menu, where only the CCS styles are being used.



CSS Code:

<style>

/* ONLY CSS dropdown menus. */
#nav {
   margin: 0;
   padding: 0;
   height: 1em; }
#nav li {
   list-style: none;
   float: left; }
#nav li a {
   display: block;
   padding: 3px 8px;
   background-color: #ff0000;
   color: #fff;
   text-decoration: none;
   border-left:#fff 1px solid;
   }
#nav li a:hover { background:#000}  
#nav li ul {
   display: none;
   width: 10em;
   background-color: #333;}
#nav li:hover ul, #nav li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0; }
#nav li:hover li, #nav li.hover li {
   float: none; }
#nav li:hover li a, #nav li.hover li a {
   background-color: #ff0000;
   border-top: 1px solid #fff;
   color: #fff; }
#nav li li a:hover {
   background-color: #000; }
</style>

HTML Code:

<div id="wrap">
<h1>CSS Dropdown Menu</h1>
<ul id="nav">
<li><a href="#">Menu Item 1</a>
    <ul>
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
        <li><a href="#">Submenu 3</a></li>
    </ul>
</li>
<li><a href="#">Menu Item 2</a>
    <ul>
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
        <li><a href="#">Submenu 3</a></li>
    </ul>
</li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a>
    <ul>
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
        <li><a href="#">Submenu 3</a></li>
    </ul>
</li>
</ul>
</div>

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete

Books for you (Crafted with )