Drop down menu can be designed using with a simple css. lets see how the coding works.
Then the final output will be as like this,
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>
No comments:
Post a Comment