Making of Drop down menu using html and php
The file of html save in any name but css file save in menu.css and link in the html file.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<big>uk<big>
<div class="menu">
<ul>
<li><a href="#">Web Devolopment</a>
<ul>
<li><a href="#">java Script</a></li>
<li><a href="#">j Query</a></li>
<li><a href="#">Html</a></li>
<li><a href="#">css</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li><a href="#">Web Devolopment</a>
<ul>
<li><a href="#">java Script</a></li>
<li><a href="#">j Query</a></li>
<li><a href="#">Html</a></li>
<li><a href="#">css</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li><a href="#">Web Devolopment</a>
<ul>
<li><a href="#">java Script</a></li>
<li><a href="#">j Query</a></li>
<li><a href="#">Html</a></li>
<li><a href="#">css</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li><a href="#">Web Devolopment</a>
<ul>
<li><a href="#">java Script</a></li>
<li><a href="#">j Query</a></li>
<li><a href="#">Html</a></li>
<li><a href="#">css</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
css code
/* CSS Document */
.menu
{padding-left:45px;
margin:0px;
}
.menu ul
{
padding:0px;
margin:0px;
line-height:30px;
}
.menu li
{
padding:0px;
margin:0px;
list-style:none;
float:left;
position:relative;
background-color:#660000;
}
.menu a
{
width:130px;
height:30px;
display:block;
text-decoration:none;
color:#FF0000;
border:2px solid #333399;
text-align:center;
}
.menu ul ul
{
position:absolute;
visibility:hidden;
top:30px;
}
.menu ul li:hover ul
{
visibility:visible;
}
.menu a:hover
{
background:#000099;
color:pink;
}
Output
 |
| drop down menu |
No comments:
Post a Comment