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.