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;
  }
}

Select allOpen in new window