Second Level Navigation with CSS

I downloaded a template with pre-existing navigation.  It works fine, though I do need it to fly out to the right on second level navigation and that option isn't included in the existing CSS.  Below is my HTML as a sample and I've included the CSS as an attachment.

Could someone perhaps do a little modification to my HTML/CSS so that it works as I want it to?

I've been trying for several hours now - to no avail.    


<div id="global_header">
   
        <div class="center">
            <h1 id="logo"><a class="text_replace" href="/html/default.asp">Baltimore Washington Medical Center - Intranet</a></h1>
                  
                  <ul id="nav">
                <li id="button_01_global_nav"><a class="text_replace" href="#">Policies &amp; Manuals</a>
                        <ul class="dropdown_shadow_bg">
                        <li><div class="firstli"><a href="#">Link 1</a></div></li>
                        <li><div><a href="#">Link 2</a></div></li>
                                    <li><div><a href="#">Link 3</a></div></li>
                                          <!--This is where I want the navigation to expand out right, there is no code in the CSS for this so my classes are made up-->
                                          <ul class="right_nav">
                                          <li><div><a href="#">Right Nav 1</li>
                                          <li><div><a href="#">Right Nav 2</li>
                                          <li><div><a href="#">Right Nav 3</li>
                                          </ul>
                                    <li><div><a href="#">Link 4</a></div></li>
                                    <li><div class="lastli"><a href="#">Link 5</a></div></li>
                        <li class="dropdown_shadow_bottom_bg"></li>
                </ul>
            </li>
</ul>
            <div style="clear: both;"></div>
        </div>
       
    </div>

/*04 HEADER*/
#global_header {
    background: url(../images/skin1/noisy_bg.jpg);
    height:144px;
}
#global_header h1#logo{
    float:left;
    margin:0;
}
#global_header h1#logo a{
    display:block;
    background:url(../images/skin1/logo2.png);
    width:250px;
    height:144px;
}
#global_header ul#nav{
    position:relative;
    float:right;
    top:90px;
    right:0;
    z-index:99;
}
#global_header ul#nav li{
    position:relative;
    float:left;
}
#global_header ul#nav li .global_nav_separator{
    position: absolute;
    top: 11px;
    left: 0;
    width: 1px;
    height: 12px;
    background: url(../images/skin1/nav_separator.png) no-repeat;
}
#global_header ul#nav li a{
    display: block;
    height:58px;
}
/*nav links need explicit widths to match their background image*/
li#button_01_global_nav{background:url(../images/skin1/nav_button/button_01.png) repeat 0 0; width:123px; height:40px;}
li#button_02_global_nav{background:url(../images/skin1/nav_button/button_02.png) repeat 0 0; width:120px; height:40px;}
li#button_03_global_nav{background:url(../images/skin1/nav_button/button_03.png) repeat 0 0; width:122px; height:40px;}
li#button_04_global_nav{background:url(../images/skin1/nav_button/button_04.png) repeat 0 0; width:125px; height:40px;}
li#button_05_global_nav{background:url(../images/skin1/nav_button/button_05.png) repeat 0 0; width:126px; height:40px;}
li#button_06_global_nav{background:url(../images/skin1/nav_button/button_06.png) repeat 0 0; width:55px; height:40px;}
 
/*level two*/
#global_header ul#nav ul{
    background: none;
    width: 206px;
    visibility: hidden;
    position: absolute;
    top: 58px;
    left: 0;
}
#global_header ul#nav ul.dropdown_shadow_bg{
    background: url(../images/skin1/dropdown_shadow_bg.png) center top repeat-y;
}
#global_header ul#nav ul li.dropdown_shadow_bottom_bg{
    position:absolute;
    background: url(../images/skin1/dropdown_shadow_02_bg.png);
    margin: 0;
    padding: 0; 
    width: 206px;
    height: 9px;
    border: none;
}
#global_header ul#nav ul li{
    background: url(../images/skin1/noisy_bg.jpg);
    float: none;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-size: 10px; 
    text-transform: uppercase;
    margin: 0 2px 0 2px;
    padding: 0 10px;
    line-height: 26px; /*used to be 36px this tightens up the nav*/
    width: 180px;
    height: 26px; /*used to be 36px this tightens up the nav */
}
#global_header ul#nav ul li div{
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #EFEFEF;
    width: 180px;
    height: 34px;
}
#global_header ul#nav ul li .firstli{
    border-top: none;
    height: 35px;
}
#global_header ul#nav ul li .lastli{
    border-bottom: none;
    height: 35px;
}
#global_header ul#nav li a{
    display: block;
    margin: 0 10px;
    color: #3c7ba6;
    text-decoration: none;
}
#global_header ul#nav li a:hover{
    color: #000000;
    text-decoration: none;
}
/* ie 6 & 7 needs inline block */
#global_header ul#nav ul li a{
    border-right: none;
    width: 100%;
    display: inline-block;
}

Select allOpen in new window