Poof - Drop downs disappear in Navigation

nsitedesigns
nsitedesigns used Ask the Experts™
on
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LZ1
Top Expert 2011

Commented:
It looks like it's not grabbing the CSS at all for the drop down. On your test site you don't have nearly as many elements.

Try being more specific in the CSS:

You have this:  
/* The magic */
 li:hover ul, li.over ul { display: block; }

Open in new window


Try this:
#main_stage #sidebar1 ul#nav li ul{display:block}

Open in new window

Top Expert 2011
Commented:
Whoops, that 2nd code should be this:

#main_stage #sidebar1 ul#nav li:hover ul, li.over ul { display: block; }

Open in new window

Author

Commented:
The test site was merely to get the navigation set up.  No stylizing - no nothing.  I got it to work and then tried to dump it into my stylized page.  Didn't work.  I will try your suggestions.

Author

Commented:
Ok.  I tried your code and well, it kinda worked. You can now see drop downs but they appear immediately above the nav bar way up ontop of the page.
http://nsitedesigns.com/nsitedesigns/ymca/2.html


I would like them to be like the test page.
http://nsitedesigns.com/nsitedesigns/ymca/test.html
LZ1
Top Expert 2011

Commented:
Add position:relative to the ul#nav.  Then you'll have to play with your top and left values in the CSS for the drop down.

Author

Commented:
I am not sure that is the right fix.  I did what you asked (other than futz with the left and top values).  The problem is that ALL drop downs appear in the same position, immediately to the right of Programs/Schedules.  I need the drop downs to work exactly like the beta site.  They need to be to the right of the "mother" button.  For example, Photo Galleries needs to have the 3 photo gallery drop down buttons appear immediately to the right of the Photo Galleries button. Now, all drop downs appear to the right of the Programs/Schedules top button.

working page:
http://nsitedesigns.com/nsitedesigns/ymca/2.html

nav model
http://nsitedesigns.com/nsitedesigns/ymca/test.html

Author

Commented:
Since the navigation test.html page is working, why can't I simple drop it into 2.html page?
LZ1
Top Expert 2011

Commented:
I'm seeing it work in ie 7, 8, FF 5 and Chrome.  The only thing you have to play with now is the left:135px;
Try changing it to 164px.  

Author

Commented:
Sadly, it does't work in FF or Safari on a mac.  Also, it doesn't work on FF and Opera on a PC.  The drop downs are positioned at the very top.  I need them to move to the right of each button that is calling it.  See screen shot below.  THis is not how it is supposed to look.  Changing left position will not bring it down

http://screencast.com/t/84lrnVSp8w0
LZ1
Top Expert 2011

Commented:
One more position relative to the ul#nav li and that should take care of it.

Author

Commented:
Nope - - drop downs still appearing to right of Programs/Schedules button regardless of which button you click on.  They should be appearing to right of button associated with it.

Author

Commented:
Can anyone help me please?  This shouldn't be that difficult.  I just need simple drop downs that show up to the right of the button.
LZ1
Top Expert 2011
Commented:
See my last comment:

Add position:relative to ul#nav li on line 102 of your 2.css

Author

Commented:
See reply on Aug 5.  Unfortunately, I did that and it still isn't working on either a mac or pc.
LZ1
Top Expert 2011

Commented:
We're talking about this page here: http://nsitedesigns.com/nsitedesigns/ymca/2.html 

In your CSS file 2.css on line 102 it is still not showing up.  

What browsers are you using to test?

Author

Commented:
What the heck?  Let me check that out.  I know that I uploaded it on Friday.  Wait a sec

Author

Commented:
Well how weird is that!  I uploaded them again and it is working now.  Sorry for the hassle.  
LZ1
Top Expert 2011

Commented:
No problem!  Just glad to help. :)

Author

Commented:
One quick question.  Do you know why the nav floats to the right off the page in DW when I open html file.  Yet, when I insert new image on right (with same dimensions as an earlier image) it floats to the left where it is supposed to be.  THEN, if I close this file which now looks good and reopen it, the nav floats over to the right off the page again.  This is extremely annoying.
LZ1
Top Expert 2011

Commented:
DW still has a long way to go in terms of WYSIWYG.  I generally don't even use design view unless I'm dealing with a very large table and even then I test in the browser.

Bottom line: As long as it looks good in the browser, it doesn't really matter what it looks like in DW.  :)

Author

Commented:
Ok.  : (

I use design view and having it jump around is very distracting.  I have been using 7+ DW for years now and never ran into anything this funky before.

Author

Commented:
Well, I got the nav to lay where I want it by removing the sidebar 1 div tag.  But now the drop downs aren't working again.  I will open new ticket.  Watch for it.  I hope you  can help with  this one too.
LZ1
Top Expert 2011

Commented:
I will do what I can. As long as it's in the CSS or HTML zones I'll pick it up.

Author

Commented:
I put it in css, dw and html

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial