Re: Double Navigation Drop Down Problem

Sun, 03 May 2015 09:15:15 +0000

Noted. Please delete this thread. Thankyou.

Re: Double Navigation Drop Down Problem

Sat, 12 Jul 2014 23:09:36 +0000

Wikidot styling questions are best asked on the Wikidot forums…

Double Navigation Drop Down Problem

Sat, 12 Jul 2014 21:58:07 +0000

For my wiki, I need a double level drop down menu. Of the two designs I've been trying to do, I've had two seperate problems, and I can't figure out how to fix either. The first design::

As it is on my wikia, before I changed to a private server —-

[*TOP MENU #A] [*TOP MENU #B] [*TOP MENU #C]
[*MENU #A L1 Menu 1] [*MENU #A L1 Menu 2] [*MENU #A L1 Menu 3]
[*Menu 1 drop down]
[*Menu 1 drop down]
[*Menu 1 drop down]
[*Menu 1 drop down]

So that each of these second level horizontal menus have drop downs on hover. I can not work the code to create the second level horizontal menus.

The second design is::

[*TOP MENU A] [*TOP MENU #B] [*TOP MENU #C]
[*MENU A L1 drop down]
[*MENU A L1 drop down]
[*MENU A L1 drop down] > [*L2 drop down]

My current coding is below. Both levels of the menu show up, but when I move to hover over the second level menu, it disappears. I can't get the code to stretch the width of the first menu so that it stays active as my mouse hovers over it.

#top-bar {bottom:0; height:33px; display:block; left:0; position:absolute; width:100%; z-index:2; font-size:16px;} #top-bar ul {float:left; padding:0; height: 20px; margin:0;} #top-bar ul li {background:none; display:inline; padding:0 5px 0; margin:0; position:relative;} #top-bar ul li a {color:#fff; padding:9px 16px 6px; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; text-shadow:#1D2C2C 0 1px 0;} #top-bar ul li a:hover, #top-bar ul li a.current-link {color:#334D4D; text-shadow:none;} #top-bar ul li a:hover, #top-bar ul li.sfhover a {background:none; text-decoration:none;} #top-bar ul li ul {color:#fff; visibility:hidden; opacity:0; font-face:times; font-size:10px; left:10px; line-height:1.8em; padding:0; position:absolute; z-index:100; width:200px; background-color:#1D2C2C; height:auto; border:none; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5); -moz-box-shadow:0 1px 4px rgba(0,0,0,0.5); box-shadow:0 1px 4px rgba(0,0,0,0.5); -webkit-transition:all 400ms ease-out; -moz-transition:all 400ms ease-out;} #top-bar ul li:hover ul {display:inline-block; opacity:1;} #top-bar ul li ul li {padding:0 5px; background:none; border:none; display:inline-block; width:auto;} #top-bar ul li ul li a {background:none; padding:5px; text-transform:none;} #top-bar ul li ul li a:hover, #top-bar ul li.sfhover ul li a {-webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;} #top-bar ul li ul li ul {position:absolute; left:200px; top:0; opacity:0 !important; visibility:hidden;} #top-bar ul li ul li:hover ul {opacity:1 !important; visibility:visible;}

I would prefer to use the first design from wikia. But I'll take whatever anyone can give me advice on.