1. Copy this into your styles.css
Code: Select all
/* Top Category List */
#TopCategoryList, #TopCategoryList ul { /* all lists */
padding: 20px;
margin: 0;
list-style: none;
line-height: 1;
}
#TopCategoryList a {
display: block;
width: 10em;
text-decoration: none;
}
#TopCategoryList li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#TopCategoryList li ul { /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#TopCategoryList li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}
#TopCategoryList li:hover ul ul, #TopCategoryList li.sfhover ul ul {
left: -999em;
}
#TopCategoryList li:hover ul, #TopCategoryList li li:hover ul, #TopCategoryList li.sfhover ul, #TopCategoryList li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
Code: Select all
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("TopCategoryList").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
4. Edit default.html and move %%Panel.SideCategoryList%% to just below %%Panel.Header%%. You can really put this where ever you want but put it there for now till you can see the result. You'll need to do this for all your layout pages.