Second Level Navigation with CSS

freezilla
freezilla used Ask the Experts™
on
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;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
Sort of...

This is the theme I downloaded.  I essentially want a right flyout from one of the links (under "Features" for example).

http://www.lidpluss.com/themeforest/columbia

So I want to keep the existing drop down navigation, but just add an option on certain items to have a second level of links.

Commented:
How did you download it? What have you done to achieve it? I only can see copied and edited markup without any understanding of basic rules.

For example, this menu has javascript:
$(function(){
$("#global_header ul#nav li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("#global_header ul#nav li ul li:has(ul)").find("a:first").append(" &raquo; ");
});

Open in new window

without this and other scripts this menu will never work.

If you like style of that menu, I suggest you to find menu which will work for you (find pure CSS and HTML menu(navigation), which is easy to set up.) and then implement style. At this moment everything looks messy, to help you with this one I have to start from scratch.
I am not going to do that.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I downloaded it from ThemeForest.net (I paid for it) and have all HTML and CSS that this template came with, but this second fly out option didn't seem to be an option with this particular template.

So if I'm reading you correctly - your suggestion is to just find another drop down menu solution with a right fly out and just incorporate that into the navigation as opposed to tweak this one so that it will work?

Commented:
I have 1 more question: is it what you want?
 example

Author

Commented:
Yes!  Precisely.

Commented:
Strangely enough I tested template and it supports second level at least.

Your problem because of wrong position of second lvl menu, It should be between bold tags:


<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>HERE</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>

Author

Commented:
I still can't get it to work.  I've attached the full HTML and CSS (just downloaded a fresh copy from TF).  So if you can get it to work, I'll be amazed.


index.html
application-skin1.css

Commented:
Do you want copy of template which will work on your pc, because you cannot get it right?
Because menu doesn't work only with CSS and HTML, it uses some JavaScript as well.
If you want I can make same copy in zip, which you can open on you pc.

Author

Commented:
Yes please!

Author

Commented:
I'll attach the JS as well
Commented:
Question about third Level, so in application-skin1.css  >> 04 find >> Level tree, if you want to style it.
Check it:
https://rapidshare.com/files/2199025263/Expert_help.rar

Author

Commented:
Perfect. Bless you!

Author

Commented:
Thank you!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial