zoe20
09-20-2009, 03:47 PM
Hi this is my First post in here. Hi i am making web site where i have to use a vertical drop down menus. i already created the nav bar and the roll overs. please some one help me make drop down menus please.
regards
This is the Live demo of the page:
Click Here (http://hook4adesign.com/1/testing.htm)
This is the CSS :
html,body{
background: #B256A1 0px 0px;
margin: 0px;
padding: 0px;
}
#wrapper{
margin: 0px auto;
width: 965px;
background: url(images/bg.png) repeat-y;
height: 965px;
}
#header{
background: url(images/header.png) no-repeat;
height: 132px;
width: 965px;
margin-bottom: 3px;
}
#nav{
background: url(images/nav.png) no-repeat;
height: 40px;
width: 965px;
}
#adv{
background: url(images/saying.png) no-repeat;
height: 54px;
width: 965px;
margin-bottom: 3px;
}
#sidenav{
background: url(images/nav_back.png) no-repeat;
float: left;
height: 312px;
width: 238px;
position: relative;
left: 12px;
}
#sidenav ul{
list-style: none;
padding: 0px;
margin: 16px 0px 0px;
}
#sidenav ul li{
margin: 0px 0px 2px;
padding: 0px;
}
#sidenav ul li a{
background: url(images/btn.png) no-repeat left top;
font: normal 15px/33px "Arial MT";
color: #000000;
text-decoration: none;
display: block;
height: 33px;
width: 238px;
padding: 0px 0px 0px 12px;
}
#sidenav ul li a:hover {
background: url(images/btn_1.png) no-repeat;
color: #B256A1;
}
#sideadv{
background: url(images/imgg.png) no-repeat;
float: right;
height: 312px;
width: 696px;
position: relative;
right: 12px;
}
#middle{
height: 312px;
width: 965px;
margin-bottom: 3px;
}
This is the Mark Up:
<!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>Testing</title>
<link href="z.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="adv"></div>
<div id="middle">
<div id="sidenav">
<ul>
<li><a href="">Our Value,Vision & Mission</a></li>
<li><a href="">Our Products</a></li>
<li><a href="">Our Teams</a></li>
<li><a href="">Our Clients</a></li>
<li><a href="">Our Performance</a></li>
<li><a href="">Latest News</a></li>
<li><a href="">ABB In the community</a></li>
<li><a href="">Feedback</a></li>
</ul>
</div>
<div id="sideadv">
</div>
</div>
</div>
</body>
</html>
Thanks in advance.
regards
This is the Live demo of the page:
Click Here (http://hook4adesign.com/1/testing.htm)
This is the CSS :
html,body{
background: #B256A1 0px 0px;
margin: 0px;
padding: 0px;
}
#wrapper{
margin: 0px auto;
width: 965px;
background: url(images/bg.png) repeat-y;
height: 965px;
}
#header{
background: url(images/header.png) no-repeat;
height: 132px;
width: 965px;
margin-bottom: 3px;
}
#nav{
background: url(images/nav.png) no-repeat;
height: 40px;
width: 965px;
}
#adv{
background: url(images/saying.png) no-repeat;
height: 54px;
width: 965px;
margin-bottom: 3px;
}
#sidenav{
background: url(images/nav_back.png) no-repeat;
float: left;
height: 312px;
width: 238px;
position: relative;
left: 12px;
}
#sidenav ul{
list-style: none;
padding: 0px;
margin: 16px 0px 0px;
}
#sidenav ul li{
margin: 0px 0px 2px;
padding: 0px;
}
#sidenav ul li a{
background: url(images/btn.png) no-repeat left top;
font: normal 15px/33px "Arial MT";
color: #000000;
text-decoration: none;
display: block;
height: 33px;
width: 238px;
padding: 0px 0px 0px 12px;
}
#sidenav ul li a:hover {
background: url(images/btn_1.png) no-repeat;
color: #B256A1;
}
#sideadv{
background: url(images/imgg.png) no-repeat;
float: right;
height: 312px;
width: 696px;
position: relative;
right: 12px;
}
#middle{
height: 312px;
width: 965px;
margin-bottom: 3px;
}
This is the Mark Up:
<!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>Testing</title>
<link href="z.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="adv"></div>
<div id="middle">
<div id="sidenav">
<ul>
<li><a href="">Our Value,Vision & Mission</a></li>
<li><a href="">Our Products</a></li>
<li><a href="">Our Teams</a></li>
<li><a href="">Our Clients</a></li>
<li><a href="">Our Performance</a></li>
<li><a href="">Latest News</a></li>
<li><a href="">ABB In the community</a></li>
<li><a href="">Feedback</a></li>
</ul>
</div>
<div id="sideadv">
</div>
</div>
</div>
</body>
</html>
Thanks in advance.