Dropdown Menu in HTML and CSS ON Adobe Dreamweave
This is not so difficult, you need just to do some practice on basics od CSS. Below video tutorials whoch are in urdu will show you how to make drop down menu in HTML or Css. These tutorials are taking your CSS skills to next level.
THIs Video source code on my website.
THIs Video source code on my website.
Dropdown Menu in HTML and CSS Part 1
Dropdown Menu in HTML and CSS Part 2
This Video Source Code Here…
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
.nav{
margin-left:180px;}
.nav ul{
padding:0px;
margin:0px;
line-height:30px;}
.nav li{
background:teal;
list-style:none;
float:left;
position:relative;}
.nav a{
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
.nav{
margin-left:180px;}
.nav ul{
padding:0px;
margin:0px;
line-height:30px;}
.nav li{
background:teal;
list-style:none;
float:left;
position:relative;}
.nav a{
width:120px;
height:30px;
display:block;
text-decoration:none;
color:white;
border:2px solid white;
text-align:center;
text-shadow:1px 1px 1px #FF9900;
}
.nav ul ul {
position:absolute;
top:33px;
visibility:hidden;}
.nav ul li:hover ul{
visibility:visible;}
.nav a:hover{
background:brown;}
.nav ul li:hover ul li a:hover{
background:#09F;
}
</style>
</head>
height:30px;
display:block;
text-decoration:none;
color:white;
border:2px solid white;
text-align:center;
text-shadow:1px 1px 1px #FF9900;
}
.nav ul ul {
position:absolute;
top:33px;
visibility:hidden;}
.nav ul li:hover ul{
visibility:visible;}
.nav a:hover{
background:brown;}
.nav ul li:hover ul li a:hover{
background:#09F;
}
</style>
</head>
<body>
<div class=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Java Script</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
<li><a href=”#”>About</a></li>
</ul>
</div>
</body>
</html>
wrapper
<div class=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Java Script</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
<li><a href=”#”>About</a></li>
</ul>
</div>
</body>
</html>
0 comments:
Post a Comment