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

This is the CSS :

Code:

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:
Code:
<!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 &amp; 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.