We help IT Professionals succeed at work.
Get Started

Second Level Navigation with CSS

freezilla asked
Last Modified: 2012-05-11
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>
                                    <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>
            <div style="clear: both;"></div>
/*04 HEADER*/
#global_header {
    background: url(../images/skin1/noisy_bg.jpg);
#global_header h1#logo{
#global_header h1#logo a{
#global_header ul#nav{
#global_header ul#nav li{
#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;
/*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{
    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;

Open in new window

Watch Question
This problem has been solved!
Unlock 1 Answer and 14 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE