DROP DOWN MENU WITH CSS STYLES :
Here login box also include. this drop down menu is very good look and easy to understand. It is created with simple code and easy way. Here we have two file one is css file name is dd.css and other one is html file name is dropdown.html
code for html file :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="dd.css">
</head>
<body>
<div id="style">
<ul id="navigation">
<li><a href="" class="first">HOME</a></li>
<li><a href="">TECHNOLOGIES >></a>
<ul>
<li><a href="">Java</a></li>
<li><a href="">HTML</a></li>
<li><a href="">PHP</a></li>
<li><a href="">C</a></li>
<li><a href="">Android</a></li>
</ul></li>
<li>
<a href="">LOGIN</a>
<ul>
<li><a><table>
<tr><td>Email id :</td></tr>
<tr><td><input type="text" name="" value="" /></td></tr>
<tr><td>Password :</td></tr>
<tr><td> <input type="password" name="" value="" /></td></tr>
<tr><td><input type="submit" value="LOGIN" /></td></tr>
</table></a></li>
</ul>
</li>
<li><a href="" class="last">CONTACT</a></li>
</ul>
</div>
</body>
</html>
code for css file name dd.css :
/*this below styles for main menu buttons*/
#style {
position: relative;
margin-top: 50px;
margin: 0px auto;
width: 680px;
padding: 10px;
}
ul#navigation{
margin: 0px auto;
position: relative;
float: left;
}
ul#navigation li{
position: relative;
float: left;
border-bottom: 2px solid cadetblue;
border-top: 1px solid #c4dbe7;
display: inline;
font: 12px;
margin: 0;
padding: 0px;
}
ul#navigation li a{
padding: 10px 25px;
position: relative;
text-decoration: none;
color: turquoise;
background-color: steelblue;
display: inline-block;
border-top: 1px solid #c9c9c9;
border-left: 1px solid #c9c9c9;
border-right: 1px solid #c9c9c9;
}
/*
ul#navigation li a:hover{
background-color: red;
color: blue;
}*/
ul#navigation li a.first{
border-left: 0 none;
}
ul#navigation li a.last{
border-right: 0 none;
}
/*this is for when we put the cursor on button that color will be change*/
ul#navigation li:hover > a{
background-color: turquoise;
color: steelblue;
}
/* drop down box : this is for display the sub content when we put the cursor on main button*/
ul#navigation li:hover > ul{
visibility: visible;
opacity:1;
}
/* this below styles for sub buttons(sub menus)*/
ul#navigation ul, ul#navigation li ul {
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
opacity:0;
position: absolute;
z-index: 99999;
width:180px;
}
ul#navigation ul li {
clear:both;
width:100%;
border:0 none;
border-bottom:1px solid #c9c9c9;
}
ul#navigation ul li a {
background:steelblue;
padding:7px 15px;
color:turquoise;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}
output :
Here login box also include. this drop down menu is very good look and easy to understand. It is created with simple code and easy way. Here we have two file one is css file name is dd.css and other one is html file name is dropdown.html
code for html file :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="dd.css">
</head>
<body>
<div id="style">
<ul id="navigation">
<li><a href="" class="first">HOME</a></li>
<li><a href="">TECHNOLOGIES >></a>
<ul>
<li><a href="">Java</a></li>
<li><a href="">HTML</a></li>
<li><a href="">PHP</a></li>
<li><a href="">C</a></li>
<li><a href="">Android</a></li>
</ul></li>
<li>
<a href="">LOGIN</a>
<ul>
<li><a><table>
<tr><td>Email id :</td></tr>
<tr><td><input type="text" name="" value="" /></td></tr>
<tr><td>Password :</td></tr>
<tr><td> <input type="password" name="" value="" /></td></tr>
<tr><td><input type="submit" value="LOGIN" /></td></tr>
</table></a></li>
</ul>
</li>
<li><a href="" class="last">CONTACT</a></li>
</ul>
</div>
</body>
</html>
code for css file name dd.css :
/*this below styles for main menu buttons*/
#style {
position: relative;
margin-top: 50px;
margin: 0px auto;
width: 680px;
padding: 10px;
}
ul#navigation{
margin: 0px auto;
position: relative;
float: left;
}
ul#navigation li{
position: relative;
float: left;
border-bottom: 2px solid cadetblue;
border-top: 1px solid #c4dbe7;
display: inline;
font: 12px;
margin: 0;
padding: 0px;
}
ul#navigation li a{
padding: 10px 25px;
position: relative;
text-decoration: none;
color: turquoise;
background-color: steelblue;
display: inline-block;
border-top: 1px solid #c9c9c9;
border-left: 1px solid #c9c9c9;
border-right: 1px solid #c9c9c9;
}
/*
ul#navigation li a:hover{
background-color: red;
color: blue;
}*/
ul#navigation li a.first{
border-left: 0 none;
}
ul#navigation li a.last{
border-right: 0 none;
}
/*this is for when we put the cursor on button that color will be change*/
ul#navigation li:hover > a{
background-color: turquoise;
color: steelblue;
}
/* drop down box : this is for display the sub content when we put the cursor on main button*/
ul#navigation li:hover > ul{
visibility: visible;
opacity:1;
}
/* this below styles for sub buttons(sub menus)*/
ul#navigation ul, ul#navigation li ul {
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
opacity:0;
position: absolute;
z-index: 99999;
width:180px;
}
ul#navigation ul li {
clear:both;
width:100%;
border:0 none;
border-bottom:1px solid #c9c9c9;
}
ul#navigation ul li a {
background:steelblue;
padding:7px 15px;
color:turquoise;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}
output :
No comments:
Post a Comment