Flex Level Drop Down Menu global background color

[Howzit]

1) Script Title: Flex Level Drop Down Menu (v1.3)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...exdropdown.htm

3) Describe problem: I am trying to get a background that will wrap the complete menu on dropdown...
I have tried playing around with div's everywhere but it seems that the first UL inherits the style of the dive and the others outside the div...

Please help...

[ddadmin]

Hmm can you clarify what you mean by "wrap the entire menu"? Also, are you specifying a background color or image?

[Howzit]

Thanks for the reply.

I am attaching a sample of how I built it in css.
I just want a solid BG color with shadow for the dropdown that will wrap the whole menu when drop down... The 1st & 2nd level will have extra menu tree entries... Flexi menu you have has just more features, & is cross browser cool

Hope this help...

[Howzit]

I am attaching the DD Flexi menu as per your script as I had it coded...
Will a person be able to have the solid BG color as I have in the previous attached image?

Thanks

[ddadmin]

Hmm there's no easy way to modify this menu so the primary menu engulfs all of its children unfortunately due to the HTML structure of the menu. It's not really an issue with setting background colors, but rather, changing the dimensions of the primary menu etc.

One menu that could be more easily modified to somewhat look like the one in your screenshot is DD Mega Menu. What you can do is modify the dimension of the primary menu so it's large enough to cover all of it's sub menus' footprint, for example:

<!--First mega menu (1) -->

<div id="megacontent" class="mega" style="width:800px;height:800px">

	<p style="margin:5px 0 10px 0"><b>Visit the following main content areas of JavaScript Kit:</b></p>

	<div class="column">
	<ul>
	<li><a href="http://www.javascriptkit.com"  rel="megasubcontent">Free JavaScripts</a></li>
	<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
	<li><a href="http://www.javascriptkit.com">Free Java Applets</a></li>
	</ul>
	</div>
	<div class="column">
	<ul>
	<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
	<li><a href="http://www.javascriptkit.com">DHTML Tutorials</a></li>
	<li><a href="http://www.javascriptkit.com">Web Design Tutorials</a></li>
	</ul>
	</div>
	<br style="clear:left" />
	<p>Need help with JavaScript? <a href="http://www.codingforums.com">Coding Forums</a> should be your next stop!</p>

</div>

<!--Second mega menu (1.1) -->

<div id="megasubcontent" class="mega" style="width:150px">
	<ul class="ulmenu">
		<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Clocks</a></li>
		<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Scrollers</a></li>
		<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Text Effects</a></li>
		<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Password Protecting</a></li>
		<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Form Validation</a></li>
		<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Ajax Scripts</a></li>
		<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Image Effects</a></li>
		<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Link Effects</a></li>
	</ul>
</div>

However, the result is still not quite the same as per your screenshot, mainly because DD Mega Menu always drops its menus downwards from the anchor link, not down and to the side.