Disjointed Image Change on DIV Rollover

Your going to hate me Paul!!!

Design change to the child pages on the navigation, how can I get it to show up below the parent and push the other menus down when rolled over?

Here is image of what Im trying to accomplish…

http://modocom.ca/fideximages/WebsiteNav.jpg

So when your not rolled over top of it the subnavs will not be showing only when you roll over it, then they will appear below their parent and the others will bump down.

Thanks your the best, I know I’m a pest my friend.

Hi,

I’m on my way out at the moment so it will have to wait until tomorrow or someone else can jump in.

I can say that it is a bad idea to have the submenu underneath and to push the other elements down as that makes navigation very awkward indeed. If you want that look then it would be better to do it on click rather than hover so the menu and column doesn’t jump around and give everyone an epileptic fit :slight_smile:

The mechanics of making it appear underneath are simply to remove the absolute positioning on hover and let the element take up its display in the flow which will autmotically push other content down (there will be a few other tweaks needed but that’s the main gist of it.).

Ok thanks, Ive taken out the absolute but it does show up but not push everything down.

What else am I missing to do this, sorry really just want to get this done and up but having a hell of a time with this.

I agree with the click as well and if it could show up when your in one of the child pages just for that specific parent is what I need.
Thanks

Figured I’d make a new thread for this page topic since the other one had several different issues on it and ppl may not be able to find my current issue.

Anyways heres the site I’m working on…

http://modocom.ca/fidex/

Now what I want the dropdown to do is something like the image below when you rollover it

http://modocom.ca/fideximages/WebsiteNav.jpg

So when you rollover it the subpages appear and the other navigation items gets pushed down. I also when you go into subpages would like it to stay open for that parent page. So say your in Process - Blueprint Phase the main navigation for PRocess will remain open. I am using Wordpress but believe we can achieve this. I have it so the subpages do show up underneath but the other parents dont move down yet.

Much appreciated if you could help.

Thanks,

Mike

Remove the height from here:

#mainnav li {
height: 28px;
}


#mainnav li.selected ul{display:block!important;visibility:visible!important}

Back tomorrow.

Thanks, thats perfect!!!

also:


#mainnav li.selected a{background:transparent}
#mainnav li.selected>a{background:orange}

Hey Paul,

Thanks for all this now only issue I Have is say your in the “Process” section and when you rollover it all the subpages are highlighted orange when they should be black and only the selected one for example if your on Intelligence Phase then just Intelligence Phase should be orange in the dropdown menu and the others black.

Thanks,

Mike

I think you just need to set the nested list back to default:



#mainnav li.selected li a{color:#000}