Solved

Navigation bar - javascript dropdown

Posted on 2007-12-05
20
391 Views
Last Modified: 2013-11-19
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
Comment
  • 11
  • 9
20 Comments
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20417398
in nav_shinybuttons.css in the #nav_main ul declaration... get rid of  overflow: hidden;  see if that helps.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20417413
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20417439
I think its really weird how it is spacing it out that far
0
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20417487
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20419835
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
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20420184
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20420226
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
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20420238
I can see the menu now just fine in IE7... what isn't working on it?
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20420250
On a PC and Mac in FF it is messing up.
0
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20420377
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20420409
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
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20420416
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20420429
@darron: noticed that same thing..found it weird...I did remove it but messed up the top right.
0
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20420501
hmmm... when i removed the bottom } it broke the top right, but when i removed @media all { as well, it fixed it again...
0
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20420570
But removing both breaks the dropdown again... i'll keep looking
0
 
LVL 19

Accepted Solution

by:
darron_chapman earned 500 total points
ID: 20420607
Ok... try this...

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

0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20420632
That worked! :) Nice..any idea how to get a bg color on thedrop down? Just add it in that LI?
0
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20420839
Add this to nav_shiny_buttons.css:

  #nav_main ul li ul li{
  background-color:#FFFFFF;
  }
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20420864
Thank you so much for your help!

Ryan
0
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20420955
Glad to help... this is a learning experience for me as well!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now