STEP 1.
Add the CSS code below into your /tempates/YourTemplate/Styles/styles.css file or, create a new CSS file and call it from Panel.HTMLHead.html.
Code: Select all
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 8.0em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
margin-left : 8.0em;
}
#nav li a {
width: 11em;
width : 10em;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
Open Panels.SideCategoryList.html. Replace
<div class="Block CategoryList Moveable Panel" id="SideCategoryList">
with
<div class="Block CategoryList Moveable" id="nav">
STEP 3:
Place the following code in the Panel.HTMLHead.html file before </head>:
Code: Select all
<!-- Flyout Code -->
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").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"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>