Solved

Navigation bar - javascript dropdown

Posted on 2007-12-05
20
407 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

732 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