Sunday, 4 August 2013

Static Drop down menu using css

Drop down menu can be designed using with a simple css. lets see how the coding works.

Dropdown menu



Style :


<style type="text/css">
.main_menu
{
    height:30px;
    line-height:30px;
    color:#FFF;
    position:relative;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
.main_menu ul
{
    padding:0px;
    margin:0;
    list-style:none;
}
.main_menu ul li
{
    padding:0;
    margin:0;
    border-right:1px solid #999999;
    border-left:1px solid #999999;
    float:left;
    background:#3ea5ea;
}
.main_menu ul li a
{
    color:#000;
    display:block;
    text-decoration:none;
    padding:0 25px;
}
.main_menu ul li a:hover
{
    background:#333333;
    color:#FFF;
}
.main_menu ul li ul
{
     display: none;
     width: auto;
     position:absolute;
     top:30px;
     padding:0px;
     margin:0px;
}
.main_menu ul li:hover ul
{
     display: block;
     position: absolute;
     margin: 0;
     padding: 0;
}
.main_menu ul li:hover li
{
    float: none;
    list-style:none;
    margin:0px;
}
.main_menu ul li:hover li
{
    
    color:#FFF;
        background: rgb(237,237,237);
        background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(222,222,222,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,237,237,1)), color-stop(100%,rgba(222,222,222,1)));
        background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
        background: -o-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
        background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
        background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    border-top:1px solid #999999;
}
.main_menu ul li:hover li a
{
    color: #000;
    padding:0 20px;
    display:block;
    width:170px;
}
.main_menu ul li li a:hover
{
    color:#FFF;
}
</style>

Index :

<form name="menu">
    <div class="main_menu">
            <ul id="menu1">
                  <li id="sub_menu"><a href="#">Codetruster</a>
                       <ul>
                           <li id="sub_menu"><a href="#">welcomes</a></li>
                           <li id="sub_menu"><a href="#">you</a></li>
                           <li id="sub_menu"><a href="#">static</a></li>
                           <li id="sub_menu"><a href="#">drop</a></li>
                           <li id="sub_menu"><a href="#">down</a></li>
                           <li id="sub_menu"><a href="#">menu</a></li>
                       </ul>
                  </li>
                  <li id="sub_menu"><a href="#">welcomes</a>
                       <ul>
                           <li id="sub_menu"><a href="#">welcomes</a></li>
                           <li id="sub_menu"><a href="#">you</a></li>
                           <li id="sub_menu"><a href="#">static</a></li>
                           <li id="sub_menu"><a href="#">drop</a></li>
                           <li id="sub_menu"><a href="#">down</a></li>
                           <li id="sub_menu"><a href="#">menu</a></li>
                       </ul>
                  </li>
                  <li id="sub_menu"><a href="#">you</a>
                       <ul>
                           <li id="sub_menu"><a href="#">welcomes</a></li>
                           <li id="sub_menu"><a href="#">you</a></li>
                           <li id="sub_menu"><a href="#">static</a></li>
                           <li id="sub_menu"><a href="#">drop</a></li>
                           <li id="sub_menu"><a href="#">down</a></li>
                           <li id="sub_menu"><a href="#">menu</a></li>
                       </ul>
                  </li>
                  <li id="sub_menu"><a href="#">static</a>
                       <ul>
                           <li id="sub_menu"><a href="#">welcomes</a></li>
                           <li id="sub_menu"><a href="#">you</a></li>
                           <li id="sub_menu"><a href="#">static</a></li>
                           <li id="sub_menu"><a href="#">drop</a></li>
                           <li id="sub_menu"><a href="#">down</a></li>
                           <li id="sub_menu"><a href="#">menu</a></li>
                       </ul>
                  </li>
                  <li id="sub_menu"><a href="#">drop</a>
                       <ul>
                           <li id="sub_menu"><a href="#">welcomes</a></li>
                           <li id="sub_menu"><a href="#">you</a></li>
                           <li id="sub_menu"><a href="#">static</a></li>
                           <li id="sub_menu"><a href="#">drop</a></li>
                           <li id="sub_menu"><a href="#">down</a></li>
                           <li id="sub_menu"><a href="#">menu</a></li>
                       </ul>
                  </li>
                  <li id="sub_menu"><a href="#">down</a>
                       <ul>
                           <li id="sub_menu"><a href="#">welcomes</a></li>
                           <li id="sub_menu"><a href="#">you</a></li>
                           <li id="sub_menu"><a href="#">static</a></li>
                           <li id="sub_menu"><a href="#">drop</a></li>
                           <li id="sub_menu"><a href="#">down</a></li>
                           <li id="sub_menu"><a href="#">menu</a></li>
                       </ul>
                  </li>
                  <li id="sub_menu"><a href="#">menu</a>
                       <ul>
                           <li id="sub_menu"><a href="#">welcomes</a></li>
                           <li id="sub_menu"><a href="#">you</a></li>
                           <li id="sub_menu"><a href="#">static</a></li>
                           <li id="sub_menu"><a href="#">drop</a></li>
                           <li id="sub_menu"><a href="#">down</a></li>
                           <li id="sub_menu"><a href="#">menu</a></li>
                       </ul>
                  </li>
             </ul>
     </div>
</form>

Then the final output will be as like this,