Sample Categories Structure HTML
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!-- Menu System Structure -->
<div class='categories'>
<div class='portlet-wrapper'>
<div class='portlet-header'>
<div class='portlet-title-no-controls'>
Categories
</div>
</div>
<div class='portlet'>
<h3>Contents</h3>
<ul class='mktree' id='Contents'>
<li class='liClosed'>Tree Name
<ul>
<li class='liItem'><a href='/xowiki/forum'>item1</a></li>
<li class='liItem'><a href='/xowiki/index'>item2</a></li>
<li class='liClosed'>
item3
<div class="submenu">
<ul>
<li class='liItem'><a href='/xowiki/one'>one</a></li>
<li class='liItem'><a href='/xowiki/two'>two</a></li>
<li class='liItem'><a href='/xowiki/three'>three</a></li>
<li class='liClosed'>four
<div class="submenu">
<ul>
<li class='liItem'><a href='/xowiki/first'>first</a></li>
<li class='liItem'><a href='/xowiki/second'>second</a></li>
<li class='liItem'><a href='/xowiki/third'>third</a></li>
<li class='liItem'><a href='/xowiki/fourth'>fourth</a></li>
<li class='liItem'><a href='/xowiki/fifth'>fifth</a></li>
<li class='liItem'><a href='/xowiki/sixth'>sixth</a></li>
</ul>
</div>
</li>
<li class='liItem'><a href='/xowiki/five'>five</a></li>
<li class='liItem'><a href='/xowiki/six'>six</a></li>
</ul>
</div>
</li>
<li class='liClosed'>
item4
<div class="submenu">
<ul>
<li class='liItem'><a href='/xowiki/another'>another</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- End of Menu System -->
CSS Classes Invoking Singing AND Dancing Bears
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* ################### */
/* Menu system classes */
/* ################### */
/* Set the style for links on the menu bar */
div.categories a:link {font-family: "Segoe UI", arial, sans-serif;
font-weight: bold;
font-size: 11pt}
/* Set style for visited links on the menu bar */
div.categories a:visited {font-family: "Segoe UI", arial, sans-serif;
font-weight: bold;
font-size: 11pt}
/* Vanish the bits of the OpenAcs Category tree that we don't want */
div.portlet-header {display: none}
div.portlet > h3 {display: none}
/* Hide top layer of Category tree by fiddling with font size */
div.portlet > ul.mktree > li.liClosed {font-size: 0pt;
list-style: none}
/* Have to immediately reset explicitly to size required for menu bar */
div.portlet > ul.mktree > li.liClosed > ul {font-family: "Segoe UI", arial, sans-serif;
font-weight: bold;
font-size: 11pt;
overflow: visible}
/* Use to set position of menubar */
div.portlet {position: absolute;
width: 70%;
top: 110px;
left: 5px;
margin: 0em;
padding: 0em;
color: #6d6f71;
opacity: 0.85;
z-index: 1}
/* The addition of this <div> is unavoidable because with a horizontal menubar */
/* you have to take the dropdown out of the flow whilst preserving its position */
/* relative to the top level option selected. A <div> block allows for relative */
/* positioning without upsetting the flow of the horizontal elements. */
div.submenu {display: none;
position: absolute;
width: 100%;
left: 0px;
margin: 0em;
padding: 0em;
overflow: visible;
color: #4a9a44;
background: #ffffff;
-moz-border-radius: 12px;
z-index: 1}
/* Make sure that the first layer is displayed horizontally */
ul.mktree > li > ul:first-child > li {position: relative;
top: 0px;
left: 0px;
display: inline;
padding: 2px 20px 5px 20px}
/* All subsequent descendents are block displayed submenus */
div.submenu ul {display: block;
list-style: none;
position: relative;
width: 70%;
left: 0px;
top: 0px;
padding: 2px 0px 2px 0px;
margin: 10px 20px 10px 20px;
line-height: 0.9em;
text-align: left;
color: #4a9a44}
/* Adjust gap between seperate <li> entries, but not between wrapped entries */
ul.mktree > li > ul:first-child > li div.submenu > ul > li {margin: 12px 0px 12px 0px}
/* Add in the horizontal menu item separator bars */
ul.mktree > li > ul:first-child > li +li {border-left: solid 2px;
border-color: #4a9a44}
/* The following pushes sub-sub-menus to the right and down slightly*/
div.submenu div.submenu {left: 99%; top: 36%}
/* The following makes the menus appear when the mouse moves over the items */
li:hover > div.submenu:first-child {display: block}
