WebsiteBaker Support (2.8.x) > Templates, Menus & Design
3 level horizontal dropdown menu system
oeh:
Sorry did not do it for me dough.
The space between the first and the next level gets to large (to much to the right)
and the first menu (to the left) gets a black background.
I've tried to figure it out, but with no luck.
MissyW:
--- Quote from: dadio on March 01, 2010, 02:08:33 PM ---I ran to the same problem. I have a 4 level menu that did work propery. I used AllCSS2 showmenu2 call and I took the ALLCSS2 CSS and modified it so the look would be Multiflex-3.
Here is the ShowMenu2 call you need to put in the index.php file
--- Code: ---<?php show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="header_menu" class="menu">'); ?><br />
--- End code ---
Here is the MUltiflex-3 css now in the layout_setup.css for the nav2 navigation level section that controls the dropdowns (BTW, you could also get the css from the website baker site itself http://www.websitebaker2.org/en/home.php by looking at the source file of the web page and looking at the css that controls the dropdowns on the WB site itself.):
--- Code: ---/*Drop-down menu*/
.header-bottom {width: auto;display:block;clear:both;}
/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~ */
ul.menu, li.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
}
/* Header menu */
//#header_menu {position: absolute; margin-left: 20px;background:#555;}
//#header_menu li {line-height: normal;}
//ul#header_menu {z-index: 10; clear: both;}
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:900px; border:none; background:rgb(225,225,225) url(./img/bg_head_bottom_nav.jpg) no-repeat; color:rgb(75,75,75); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {
list-style-type:none;
/*
(Disappearing List-Background)
http://www.positioniseverything.net/explorer/ie-listbug.html
*/
position: relative; /* Fix the Stupid IE6 Bug */
}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
/* Root Level Link Formatting */
.nav2 ul li a:hover, .nav2 li a:focus {background-color:rgb(210,210,210); text-decoration:none;}
.nav2 li a:active, .nav2 ul li a.active {background-color:rgb(210,210,210); text-decoration:none;}
/* Current page Customisations*/
.nav2 li.menu-current a {background: #000; color: #fff; border-bottom: 1px solid #000;}
.nav2 li.menu-current a {font-weight: bold;}
/* 2nd Child menu */
.nav2 .menu li ul {position: absolute; width: 10em; margin: 0; display: none; text-transform: none; border: none; font-size: 100%;}
.nav2 .menu li ul li {width: 10.5em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: auto;}
.nav2 .menu li ul a {width: 10em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}
/* 2nd Child link hover */
.nav2 .menu li ul a:hover {color: #4b4c4d; background: #666; border: 0; color:#fff;}
/* Show and hide */
.nav2 .menu li:hover ul, .nav2 .menu li a:focus ul, .nav2 .menu li.subMenu ul {display: none;}
.nav2 .menu li ul ul { display: block;}
.nav2 .menu li:hover ul ul, .nav2 .menu li.subMenu ul ul {display: none;}
.nav2 .menu li:hover ul, .nav2 .menu li li:hover ul, .nav2 .menu li.subMenu ul, .nav2 .menu li li.subMenu ul {display: block;}
/* 3rd Child Menu Appreances */
.nav2 .menu li ul li ul li a { width: 10em; height:auto; line-height:1.3em; margin-left:0; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}
/* Positioning the Pop-out Drops */
.nav2 li {position: relative;}
.nav2 ul ul ul {
position: absolute;
top: 1px;
left: 119%;
}
--- End code ---
I hope this helps someone else in the future.
--- End quote ---
Brilliant!!
Don't know if you are still around, Dadio, but THANKS SO MUCH :lol: I was tearing my hair out over this, but your code did it for me. I had a little trouble working out how much of the old show_menu2 code to replace in my Multiflex-3 index.php, but once I worked that out, your code fixed all my IE & SM2 nightmares! I only have a single level dropdown menu, so don't know whether this code works for multiple levels, but at least it gets the dropdown menu working in IE for one level!!!
Just wish someone would fix the Multiflex-3 template so the pulldown menu works in IE. There have been 24,265 downloads of the template, so the mind boggles at how many people have had this problem.
Much gratitude.
svsanchez:
Hello Community, I just browsed the templates site and couldn't find a template that still uses tables with the horizontal menu with dropdowns, they are all table-less css templates and I just can't figure out css, is there a table template that I could use?
fischstäbchenbrenner:
Why do you want tables for the menue? I Think its much easier to use CSS.
svsanchez:
Hello fish, I do not want to use tables on the menu, I just need the rest of the template to use tables, like the ROUND template!
Navigation
[0] Message Index
[*] Previous page
Go to full version