• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 428
  • Last Modified:

Navigation bar - javascript dropdown

I am using a layout from YAML - http://www.yaml.de/en/ - And I am adding in - http://www.htmldog.com/articles/suckerfish/dropdowns/ - For a section of my nav up top. I am having a few issues.

When you roll over "Network Advertisor" you only see one of the <li> not all four of them.

If you notice the spacing is messed up and not even like it was with out the suckerfish dropdowns in there. I have been looking through my CSS and not sure what to change to fix it to how it was.

Here is my link - http://newspapersofamerica.com/new/

The CSS for the suckfish and what i have is here:


#nav_main a {
      display: block;
      width: 10em;
}

#nav_main li {
      float: left;
      width: 10em;
}

#nav_main li ul {
      position: absolute;
      width: 10em;
      left: -999em;
}

#nav_main li:hover ul {
      left: auto;
}

Any suggestions?

Thanks!
Ryan

The code for the nav from YAML is here

@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Horizontal list navigation "Shiny Buttons"
 * (de) Horizontale Navigationsliste "Shiny Buttons"
 *
 * @copyright       Copyright 2005-2007, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http
 ://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.0.3
 * @revision        $Revision: 118 $
 * @lastmodified    $Date: 2007-08-18 16:03:42 +0200 (Sa, 18 Aug 2007) $
 */
 
@media all
{
  #nav_main {
    width: 100%;
    overflow: hidden;
    float: left;
    display: inline;
    background: #c0c0c0 url("images/shiny_buttons/background.gif") repeat-x center right;
    border-top: 1px #333 solid;
    border-bottom: 1px #333 solid;
    line-height: 0;
    font-size:95%;
    margin:10px 0 0 0;
  }
 
  #nav_main ul {
    border-left: 1px #aaa solid;
    border-right: 1px #fff solid;
    /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
    display: inline;
    float: left;
    margin: 0;
    /* (en) Left margin of the first button  */
    /* (de) Abstand des ersten Buttons vom linken Rand  */
    margin-left: 50px;
    padding: 0;
    height: 26px;
    overflow: hidden;
  }
 
  #nav_main ul li {
    border-left: 1px #fff solid;
    border-right: 1px #aaa solid;
    /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
    display: inline;
    float: left;
    font-size: 1.0em;
    line-height: 1em;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
 
  #nav_main ul li a,
  #nav_main ul li strong {
    background: transparent;
    color: #000;
    display: block;
    font-size: 1em;
    font-weight: bold;
    margin: 0;
    padding: 0.5em 0.8em 0.5em 0.8em;
    text-decoration: none;
    width: auto;
  }
 
  #nav_main ul li a:focus,
  #nav_main ul li a:hover,
  #nav_main ul li a:active  {
    background: #eee;
    color: #333;
    text-decoration: none;
  }
 
  #nav_main ul li#current {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    background: #272727 url("images/shiny_buttons/background_active.gif") repeat-x center right;
    border-left: 1px #444 solid;
    border-right: 1px #888 solid;
  }
 
  #nav_main ul li#current strong,
  #nav_main ul li#current a,
  #nav_main ul li#current a:focus,
  #nav_main ul li#current a:hover,
  #nav_main ul li#current a:active {
    background: transparent;
    color: #fff;
    text-decoration: none;
  }
}

Open in new window

0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 11
  • 9
1 Solution
 
darron_chapmanCommented:
in nav_shinybuttons.css in the #nav_main ul declaration... get rid of  overflow: hidden;  see if that helps.
0
 
catonthecouchproductionsAuthor Commented:
I tried that and check it now. And it doesnt show the drop down anymore..

Any ideas?
http://newspapersofamerica.com/new/
Thanks for the help!

Ryan
0
 
catonthecouchproductionsAuthor Commented:
I think its really weird how it is spacing it out that far
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
darron_chapmanCommented:
The #nav_main li in layout_2col_right_31.css is conflicting with the css in nav_shinybuttons.css.... when I got rid of width: 10em; from #nav_main li  the spacing fixed itself
0
 
catonthecouchproductionsAuthor Commented:
Nice...that got rid of that! And any suggestions to make it that you can see the dropdown now?

Thanks man! And how would i center that
Appreciate the help..this was bugging me!

Ryan
0
 
darron_chapmanCommented:
Adding z-index: 7; to the #nav_main ul declaration of nav_shinybuttons.css will bring the menu to the front instead of hiding it behind the other items ... i'm having a hard time finding images/shiny_buttons/background.gif on your site... make sure that's in the right place
0
 
catonthecouchproductionsAuthor Commented:
I have this now. Still not really working. Any ideas?

http://newspapersofamerica.com/new/index.php?p=contact
  #nav_main ul {
    border-left: 1px #aaa solid;
    border-right: 1px #fff solid;
    /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
    display: inline;
    float: left;
    margin: 0;
    /* (en) Left margin of the first button  */
    /* (de) Abstand des ersten Buttons vom linken Rand  */
    margin-left: 50px;
    padding: 0;
    height: 26px;
    z-index: 7;
  }

Open in new window

0
 
darron_chapmanCommented:
I can see the menu now just fine in IE7... what isn't working on it?
0
 
catonthecouchproductionsAuthor Commented:
On a PC and Mac in FF it is messing up.
0
 
darron_chapmanCommented:
I think i have it... you have too many } in base.css.... go to the very bottom of the page and delete the last }
0
 
catonthecouchproductionsAuthor Commented:
When I remove that it allows me to go over the drop down but that top right nav moves to the left and is off base.

Getting closer! haha.

Ryan
0
 
darron_chapmanCommented:
Well, I did just notice that you have a @media all { at the top of base.css that corresponds with the bottom } ... however when I deleted the bottom } it started working... i'm wondering if you actually need @media all { at the top...
0
 
catonthecouchproductionsAuthor Commented:
@darron: noticed that same thing..found it weird...I did remove it but messed up the top right.
0
 
darron_chapmanCommented:
hmmm... when i removed the bottom } it broke the top right, but when i removed @media all { as well, it fixed it again...
0
 
darron_chapmanCommented:
But removing both breaks the dropdown again... i'll keep looking
0
 
darron_chapmanCommented:
Ok... try this...

remove #col1_content, #col2_content, #col3_content { position:relative } from base.css

0
 
catonthecouchproductionsAuthor Commented:
That worked! :) Nice..any idea how to get a bg color on thedrop down? Just add it in that LI?
0
 
darron_chapmanCommented:
Add this to nav_shiny_buttons.css:

  #nav_main ul li ul li{
  background-color:#FFFFFF;
  }
0
 
catonthecouchproductionsAuthor Commented:
Thank you so much for your help!

Ryan
0
 
darron_chapmanCommented:
Glad to help... this is a learning experience for me as well!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 11
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now