WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Full-width dropdown showing ALL submenu's - Can it be done?

(1/3) > >>

CodeALot:
Hi guys,

Using Show_Menu2 I would like to have a drop-down menu (or "panel") that shows if you hover the main level items, and in that panel I want to show ALL the submenu's.
 
I have the dropdown menu, but that only shows the submenu of the pages below the main level item that I'm hovering. Now I want a div that's 100% width that shows every submenu in the menu.
 
Is that even possible using show_menu2?

Example of what I want (NOT my site, not even a WebsiteBaker site but the menu does what I want)
http://www.hsb-bouw.nl/

nibz:
Hi CodeALot,

If you have a CSS + JS (or CSS only) script i can have a look.
Because this isn't a issue of show_menu2 not being able to do this.

CodeALot:
That's a little difficult since the website is not live yet and only lives in my local webserver :), but here's the menu in my template:


--- Code: ---<div id="navContainer" style="z-index:999;">
<div id="nav" class="clearfix">
<?php show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="header_menu" class="menu">'); ?><br />
</div><!-- end nav -->
</div><!-- end navContainer -->

--- End code ---

and this is the CSS that goes with it:


--- Code: ---#nav ul li { float: left; color: #ffffff; text-align: center; margin-right:10px;}
#nav ul li a {display: block; padding: 5px 10px; color: #ffffff; text-decoration: none;}

/* Root Level Link Formatting */
#nav ul li a:hover, #nav li a:focus { background:#ddd; color:#000; -webkit-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; }
#nav li a:active, #nav ul li a.active {}

/* Current page Customisations*/
#nav li.menu-current a { font-weight:700; color: #e6352d; }
#nav li.menu-parent a { font-weight:700; color: #e6352d; }

/* 2nd Child menu */
#nav .menu li ul {position: absolute; margin: 0; display: none; text-transform: none; border-top: 0; width: 14em; }
#nav .menu li ul li {  width:10em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
#nav .menu li ul a {  width:10em; padding: 5px 10px; background-image:url('/core/menubg.png'); color: #fff; border: 0; -webkit-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;}

/* 2nd Child link hover */
#nav .menu li ul a:hover {background: #000000; border: 0; color:#fff; -webkit-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;}

/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none;}
#nav .menu li:hover ul ul, #nav .menu li.subMenu ul ul {display: none;}
#nav .menu li:hover ul, #nav .menu li li:hover ul, #nav .menu li.subMenu ul, #nav .menu li li.subMenu ul {display: block;}

/* Positioning the Pop-out Drops */
#nav li {position: relative;}
#nav ul ul ul { position: absolute; top: 1px; left: 100%; }
/* end menu */

--- End code ---

No JS is being used yet, only CSS.
Any help is greatly appreciated :)

nibz:
And you got it working without show_menu ?
(With just plain html)

CodeALot:
No, I now have a "normal" drop down menu using show_menu2 and CSS where it only shows the submenu of the main item, and I want it to show all sublevels. Like on http://www.hsb-bouw.nl

Navigation

[0] Message Index

[#] Next page