Dropdown menu using css

Here you can create menu bg in full size and for selection current active menu u can use choose selected-left-sub and menu divider

Html Code:

<div id="menu"><!--menu div Starts here -->
   
    <ul id="nav">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#"> HS&amp;E<img src="images/menu_arrow.gif" width="7" height="5" style="padding:0px 0px 0px 5px;" /></a>
        <ul>
            <li><a href="#">Accident Reporting</a>    </li>   
           
            <li><a href="#">Damage Reports</a>    </li>       
       
            <li><a href="#">Environmental Management System</a></li>
       
        </ul>
    </li>
    <li ><a href="#">Peel Ports Home</a></li>
</ul>
  
   
</div><!--menu div ends here -->

CSS:
#menu {
    position:relative;
    font-family:Arial, Helvetica, sans-serif;
    margin:0 auto;

    height: 38px;
       *height: 57px;
    margin-top:12px;
    padding:0px;

  
      width:996px;
      z-index:15;
}

#nav {
    font-family:Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0px 4px 0px 4px;
    background:url(../images/menu_bg.gif) no-repeat 0 0;
    width:996px;
   
    font-size:11px;
    font-weight:bold;
    color:#FFF;
   
}
#nav li {
        margin: 0 5px 0px 5px;
    padding: 0px 0px 8px 0px;
    float: left;
    position: relative;
    list-style: none;
    z-index:11px;
}


/* main level link */
#nav a {
    font-size:12px;
    font-weight:bold;
    color: #fff;
    text-decoration: none;
    display: block;
    padding:  14px 8px;
   
    margin: 0;
    background: url(../images/menu_divider.gif)  no-repeat  right  0px;


}
#nav a:hover {
   
    color: #fff;
   
}

/* main level link hover */
#nav .current a {

    color: #fff;
    background: url(../images/selected-left-sub.gif) repeat-x 0 0;

       
}

/* sub levels link hover */
#nav li:hover li a {
    font-size:11px;

    background-color:fff;
    border: none;
    color: #5a5a5a;


   
}
#nav ul a:hover {
    background-color:#ad2121!important;
   
    color: #fff !important;
   
}

/* dropdown */
#nav li:hover > ul {
    display: block;
}


#nav ul {
        display: none;

    margin: 0;
    padding: 0;
    width: 210px;
    position: absolute;
    top: 39px;
    left: -10px;
    background-color: #fff ;
    border: solid 1px #b4b4b4;
    cursor:pointer;
    z-index:10;
   

}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}

#nav ul a {
    font-weight: normal;
    background:none;
    padding:  8px 8px;
   
}


#nav ul ul {
    left: 181px;
    top: -3px;
}



/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;

}