Two ways to add a multi-column sub menu

There are two ways to add a UL drop down menu that spans multiple columns. The first method is the simplest, and simply requires adding a CSS class of "multicolumn" to a nested UL to turn its LI contents into columns. Move your  mouse over "Folder1" below to see an example of this:

Below shows the relevant portion of the menu markup where you'd add the CSS class "multicolumn" to turn Folder1's sub menu into multiple columns:

<ul>
<li><a href="http://www.google.com">Item 1</a></li>
<li><a href="http://www.google.com">Folder 0</a>
<ul>
<li><a href="http://www.google.com">Sub Item 1.1</a></li>
<li><a href="http://www.google.com">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="http://www.google.com">Folder 1</a>
	<ul class="multicolumn">
	<li><a href="http://www.google.com">Sub Item 1.1</a></li>
	<li><a href="http://www.google.com">Sub Item 1.2</a></li>
	<li><a href="http://www.google.com">Sub Item 1.3</a></li>
	<li><a href="http://www.google.com">Sub Item 1.4</a></li>
	<li><a href="http://www.google.com">Sub Item 1.5</a></li>
	<li><a href="http://www.google.com">Sub Item 1.6</a></li>
	<li><a href="http://www.google.com">Sub Item 1.7</a></li>
	</ul>
</li>
"
"

By default this splits the contents of the target sub menu into two columns, as dictated by the following CSS inside efluidmenu.css:

ul.multicolumn {
width: 460px !important;
left: 300px;
margin-bottom: 20px;
overflow: hidden;
}

ul.multicolumn li {
float: left;
display: inline;
}

ul.multicolumn li {
width: 50%;
/* width: 33%; */ /* for 3 columns */
/* width: 25%; */ /* for 4 columns */
}

To render 3 columns instead, change the width of the LI selector above to 33% instead.

Adding a rich HTML sub menu

The previous method of implementing a multi-column sub menu can be limiting in that it's still just a regular UL list, with no elements other than LIs allowed inside it. F0r a more robust alternative, eFluid Menu also supports attaching an arbitrary DIV on the page as one of the header's sub menus, giving you the flexibility of including anything you'd like inside the sub menu. Move your  mouse over "Folder1" below to see an example of this:

To give a menu header a rich HTML sub menu, first, insert a "rel" attribute inside the desired header's LI element pointing to the ID of the rich sub menu DIV:

<ul>
<li><a href="http://www.google.com">Item 1</a></li>
<li><a href="http://www.google.com">Folder 0</a>
<ul>
<li><a href="http://www.google.com">Sub Item 1.1</a></li>
<li><a href="http://www.google.com">Sub Item 1.2</a></li>
</ul>
</li>
<li rel="richmenu"><a href="http://www.google.com">Folder 1</a></li>
<li><a href="http://www.google.com">Item 2</a></li>
"
"

Then, simply define the sub menu DIV itself on the page, for example:

<div id="richmenu" class="richmulticolumn">

	<div class="column">
	<b>Webmaster</b>
	<ul>
	<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
	<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
	<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
	<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
	</ul>
	</div>
	
	<div class="column">
	<b>News Related</b>
	<ul>
	<li><a href="http://www.cnn.com/">CNN</a></li>
	<li><a href="http://www.msnbc.com">MSNBC</a></li>
	<li><a href="http://www.google.com">Google</a></li>
	<li><a href="http://news.bbc.co.uk">BBC News</a></li>
	</ul>
	</div>
	
	<div class="column">
	<b>Technology</b>
	<ul>
	<li><a href="http://www.news.com/">News.com</a></li>
	<li><a href="http://www.slashdot.com">SlashDot</a></li>
	<li><a href="http://www.digg.com">Digg</a></li>
	<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
	</ul>
	</div>

</div>

As you can see, anything can go inside this DIV- here we've added three ULs with accompanying headers that are floated to make the result appear as 3 columns. The style of the rich sub menu is contained inside the ".richmulticolumn" class inside efluidmenu.css. One important thing to take note when you define and associate a rich HTML sub menu with a header is that the sub menu is physically moved within the DOM tree to become a child of the header. This is why within efluidmenu.css, you see the selectors targeting ".richmulticolumn" having the following extra hierarchy:

.efluidmenu ul li > div.richmulticolumn {
	position: absolute;
	left: 0;
	display: none;
	visibility: hidden;
	border: 1px solid #289997;
	padding: 10px;
	width: 450px;
	color: white;
	background: #24a9a7;
}
"
"

Table Of Contents

This script consists of an index page plus a supplementary page: