[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Navigation bar - javascript dropdown

Posted on 2007-12-05
20
Medium Priority
?
425 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

649 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