tlarson
01-14-2008, 04:47 PM
I just read a post (http://www.codingforums.com/showthread.php?t=131214) where the user was having a problem with a suckerfish menu. I'm having a very similar problem with Internet Explorer with Vista on a site that I maintain for a PBS television station (http://www.lakelandptv.org) where my menus are showing up in the wrong positions, however my css is based on a bit different suckerfish code:
HTML:
<div class="moduletable">
<script type="text/javascript" language="JavaScript" src="http://www.lakelandptv.org/templates/lakeland/js/menu.js"></script>
<div class="menu-suckerfish-horizontal">
<ul id="menulist_root-suckerfish-horizontal" class="mainlevel-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php" class="mainlevel_active-suckerfish-horizontal">
<span class="expanded">Home</span></a>
<ul id="menulist_1-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=14&Itemid=62" class="sublevel-suckerfish-horizontal">Digital Television (DTV)</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_contact&Itemid=63" class="sublevel-suckerfish-horizontal">Contact Us</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=90&Itemid=160" class="sublevel-suckerfish-horizontal">Employment</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_jcalpro&Itemid=119" class="sublevel_current-suckerfish-horizontal" id="active_menu-suckerfish-horizontal">Events Calendar</a></li>
<li><a href="http://209.191.211.227:81/fmi/iwp/cgi?-db=PreferencePoll%2007&-loadframes" class="sublevel-suckerfish-horizontal">Preference Poll</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=68&Itemid=128" class="sublevel-suckerfish-horizontal">Privacy Policy</a></li>
</ul>
</li>
<li><a href="#" onclick="javascript: window.open('https://www.lakelandptv.org/', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false" class="mainlevel-suckerfish-horizontal"><span class="expanded">Support</span></a>
<ul id="menulist_2-suckerfish-horizontal">
<li><a href="#" onclick="javascript: window.open('https://www.lakelandptv.org/', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false" class="sublevel-suckerfish-horizontal">Join/Renew</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=20&Itemid=51" class="sublevel-suckerfish-horizontal">Employer Gift</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=21&Itemid=52" class="sublevel-suckerfish-horizontal">Business Support</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=23&Itemid=67" class="sublevel-suckerfish-horizontal">Member Benefits</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=75&Itemid=133" class="sublevel-suckerfish-horizontal">Future Planning</a></li>
</ul>
</li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=24&Itemid=103" class="mainlevel-suckerfish-horizontal"><span class="expanded">Programs</span></a>
<ul id="menulist_3-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=24&Itemid=38" class="sublevel-suckerfish-horizontal">Programs A-Z</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_wrapper&Itemid=101&schedule=1" class="sublevel-suckerfish-horizontal">TV Schedule</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=47&Itemid=118" class="sublevel-suckerfish-horizontal">Lakeland Kids</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=35&Itemid=97" class="sublevel-suckerfish-horizontal">Local Productions</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_wrapper&Itemid=170&schedule=1" class="sublevel-suckerfish-horizontal">The War</a></li>
</ul>
</li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=35&Itemid=97&show=3" class="mainlevel-suckerfish-horizontal"><span class="expanded">Lakeland News at Ten</span></a>
<ul id="menulist_4-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=blogcategory&id=15&Itemid=34" class="sublevel-suckerfish-horizontal"><span class="expanded">News</span></a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=44&Itemid=110" class="sublevel-suckerfish-horizontal">Weather</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=blogcategory&id=17&Itemid=36" class="sublevel-suckerfish-horizontal"><span class="expanded">Sports</span></a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=38&Itemid=107" class="sublevel-suckerfish-horizontal">Meet the News Team</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=35&Itemid=97&show=3" class="sublevel-suckerfish-horizontal">Watch a Newscast</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=archivesection&id=1&Itemid=121" class="sublevel-suckerfish-horizontal"><span class="expanded">News Archives</span></a></li>
</ul>
</li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_weblinks&Itemid=23" class="mainlevel-suckerfish-horizontal"><span class="expanded">Links</span></a>
<ul id="menulist_5-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=53&Itemid=123" class="sublevel-suckerfish-horizontal">Government Contacts</a></li>
<li><a href="http://click.linksynergy.com/fs-bin/stat?id=v9Mowj676bY&offerid=119262.10000025&type=3" target="_blank" class="sublevel-suckerfish-horizontal">Shop PBS</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_wrapper&Itemid=163&schedule=1" class="sublevel-suckerfish-horizontal">War Story Collection</a></li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
/** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal,
a.mainlevel-suckerfish-horizontal:link, a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel-suckerfish-horizontal:visited, a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited {
background-color: 000000;
color: white;
font-weight: bold;
}
a.mainlevel-suckerfish-horizontal:hover, a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover {
background-color: #000000;
color: WHITE;
font-weight: bold;
}
a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal,
a.sublevel-suckerfish-horizontal:link, a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel-suckerfish-horizontal:visited, a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited {
color: white;
background-image: url("../images/grey-40.png");
}
a.sublevel-suckerfish-horizontal:hover, a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
background-color: #000000;
color: WHITE;
font-weight: bold;
}
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal,
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:link, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:link, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:link,
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:visited, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:visited, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:visited {
background-color: blue;
color: white;
font-weight: bold;
}
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:hover, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:hover, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:hover {
background-color: #E0E0E0;
color: White;
font-weight: bold;
}
ul.mainlevel-suckerfish-horizontal ul .expanded {
display: block;
background-image: url("../images/arrow_right.gif");
background-position: right center;
background-repeat: no-repeat;
padding-right: 10px;
}
/** customize style / layout here */
a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal, span.mainlevel-suckerfish-horizontal,
a.mainlevel-suckerfish-horizontal:link, a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel-suckerfish-horizontal:visited, a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited,
a.mainlevel-suckerfish-horizontal:hover, a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover,
a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal, span.sublevel-suckerfish-horizontal,
a.sublevel-suckerfish-horizontal:link, a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel-suckerfish-horizontal:visited, a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited,
a.sublevel-suckerfish-horizontal:hover, a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
font-weight: bold;
font-size: 100%;
text-align: left;
text-decoration: none;
display: block;
padding: 0.3em 0.3em 0.3em 0.5em; /* top, right, bottom, left */
height: 1em;
line-height: 1em;
white-space: nowrap;
border-bottom: 1px solid #000000; /***** Change is here *****/
}
a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal, span.mainlevel-suckerfish-horizontal {
float: left;
width: auto;
}
a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal, span.sublevel-suckerfish-horizontal {
font-size: 90%;
border-top: 0px solid silver;
}
#active_menu-suckerfish-horizontal,
a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal,
a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited,
a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover,
a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal,
a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited,
a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
font-weight: bold;
}
ul.mainlevel-suckerfish-horizontal, .mainlevel-suckerfish-horizontal ul {
padding: 0;
margin: 0;
list-style: none;
}
ul.mainlevel-suckerfish-horizontal {
width: auto;
z-index: 101;
}
ul.mainlevel-suckerfish-horizontal ul {
z-index: 102;
}
ul.mainlevel-suckerfish-horizontal ul ul {
z-index: 103;
}
ul.mainlevel-suckerfish-horizontal li {
padding: 0;
margin: 0;
background: none;
list-style: none;
float: left;
position: relative;
margin-right: 1px;
}
ul.mainlevel-suckerfish-horizontal li li {
position: relative;
width: 168px;
margin: 0;
}
ul.mainlevel-suckerfish-horizontal li li ul {
left: 10em;
top: 0;
}
ul.mainlevel-suckerfish-horizontal ul {
display: none;
position: absolute;
top: 1.65em;
left: 0;
}
ul.mainlevel-suckerfish-horizontal li > ul {
top: 1.65em;
left: auto;
}
ul.mainlevel-suckerfish-horizontal li:hover ul,
ul.mainlevel-suckerfish-horizontal li.hover ul {
display: block;
}
ul.mainlevel-suckerfish-horizontal li:hover ul ul,
ul.mainlevel-suckerfish-horizontal li.hover ul ul {
display: none;
}
ul.mainlevel-suckerfish-horizontal li:hover ul li:hover ul,
ul.mainlevel-suckerfish-horizontal li.hover ul li.hover ul {
display: block;
}
ul.mainlevel-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal li li {
clear: left;
}
/** separator */
span.mainlevel-suckerfish-horizontal, span.sublevel-suckerfish-horizontal {
border-width: 0px;
padding: 0px;
}
JS:
// based on http://www.alistapart.com/articles/dropdowns and http://www.htmldog.com/articles/suckerfish/dropdowns/
if ((document.all) && (document.getElementById)) {
function MenuListElementHoverFix() {
var _this = this;
if (typeof(Array.prototype.push) == 'undefined') {
// IE < 5.5 does not support push/pop
function push() {
var j = this.length;
for (var i = 0; i < push.arguments.length; ++i) {
this[j] = push.arguments[i];
j++;
}
}
function pop() {
var i = this[this.length - 1];
this.length--;
return i;
}
Array.prototype.push = push;
Array.prototype.pop = pop;
}
this.className = 'hover'; // change the class name to use here if you are not happy with it
this.classNameSuffix = ' ' + this.className;
this.removeClassNameRegExp = new RegExp("\\b ?" + this.className + "\\b");
this.hoverElementStack = new Array();
this.onmouseover = function() {
if (!_this.isHover(this)) {
if (this.getAttribute('is_hover_class_removing') != 'true') {
this.className += _this.classNameSuffix;
}
this.setAttribute('is_hover', 'true');
}
}
this.isHover = function(element) {
return (element.getAttribute('is_hover') == 'true');
}
this.checkNonHoverState = function(element) {
if (!_this.isHover(element)) {
element.className = element.className.replace(_this.removeClassNameRegExp, '');
}
element.removeAttribute('is_hover_class_removing');
}
this.checkLastNonHoverState = function() {
var hoverElement = null;
if (_this.hoverElementStack.length > 0) {
hoverElement = _this.hoverElementStack.pop();
}
for (var i = _this.hoverElementStack.length - 1; i >= 0; i--) {
// we need to apply the "non-hover" class to the children first - else the result is mixed in the IE
var o = _this.hoverElementStack[i];
while (o != null) {
o = o.offsetParent;
if (o == hoverElement) {
_this.checkNonHoverState(_this.hoverElementStack[i]);
break;
}
}
}
if (hoverElement != null) {
_this.checkNonHoverState(hoverElement);
}
}
this.onmouseout = function() {
// all this mess to not change the class immediately (which would cause flickering in the IE)
this.setAttribute('is_hover', 'false');
if (this.getAttribute('is_hover_class_removing') != 'true') {
this.setAttribute('is_hover_class_removing', 'true');
_this.hoverElementStack.push(this);
window.setTimeout(_this.checkLastNonHoverState, 100);
}
}
this.fixElement = function(elementRoot) {
for (var i=0; i < elementRoot.childNodes.length; i++) {
var node = elementRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = this.onmouseover;
node.onmouseout = this.onmouseout;
}
this.fixElement(node);
}
};
this.findElement = function(elementRoot) {
for (var i=0; i< elementRoot.childNodes.length; i++) {
var node = elementRoot.childNodes[i];
if (node.nodeName == "UL") {
if ((node.id != '') && ((node.id.indexOf("menu") >= 0) || (node.id.indexOf("nav") >= 0))) {
this.fixElement(node);
continue; // do not iterate through children of already fixed element
}
}
this.findElement(node);
}
};
this.fix = function() {
var node = document.body;
if (node) {
_this.findElement(node);
}
}
this.addOnLoad = function() {
if (window.attachEvent) {
window.attachEvent("onload", this.fix);
} else {
window.onload = this.fix;
}
}
}
(new MenuListElementHoverFix()).addOnLoad();
}
Any help would be greatly appreciated.
Thank you.
HTML:
<div class="moduletable">
<script type="text/javascript" language="JavaScript" src="http://www.lakelandptv.org/templates/lakeland/js/menu.js"></script>
<div class="menu-suckerfish-horizontal">
<ul id="menulist_root-suckerfish-horizontal" class="mainlevel-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php" class="mainlevel_active-suckerfish-horizontal">
<span class="expanded">Home</span></a>
<ul id="menulist_1-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=14&Itemid=62" class="sublevel-suckerfish-horizontal">Digital Television (DTV)</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_contact&Itemid=63" class="sublevel-suckerfish-horizontal">Contact Us</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=90&Itemid=160" class="sublevel-suckerfish-horizontal">Employment</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_jcalpro&Itemid=119" class="sublevel_current-suckerfish-horizontal" id="active_menu-suckerfish-horizontal">Events Calendar</a></li>
<li><a href="http://209.191.211.227:81/fmi/iwp/cgi?-db=PreferencePoll%2007&-loadframes" class="sublevel-suckerfish-horizontal">Preference Poll</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=68&Itemid=128" class="sublevel-suckerfish-horizontal">Privacy Policy</a></li>
</ul>
</li>
<li><a href="#" onclick="javascript: window.open('https://www.lakelandptv.org/', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false" class="mainlevel-suckerfish-horizontal"><span class="expanded">Support</span></a>
<ul id="menulist_2-suckerfish-horizontal">
<li><a href="#" onclick="javascript: window.open('https://www.lakelandptv.org/', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false" class="sublevel-suckerfish-horizontal">Join/Renew</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=20&Itemid=51" class="sublevel-suckerfish-horizontal">Employer Gift</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=21&Itemid=52" class="sublevel-suckerfish-horizontal">Business Support</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=23&Itemid=67" class="sublevel-suckerfish-horizontal">Member Benefits</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=75&Itemid=133" class="sublevel-suckerfish-horizontal">Future Planning</a></li>
</ul>
</li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=24&Itemid=103" class="mainlevel-suckerfish-horizontal"><span class="expanded">Programs</span></a>
<ul id="menulist_3-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=24&Itemid=38" class="sublevel-suckerfish-horizontal">Programs A-Z</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_wrapper&Itemid=101&schedule=1" class="sublevel-suckerfish-horizontal">TV Schedule</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=47&Itemid=118" class="sublevel-suckerfish-horizontal">Lakeland Kids</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=35&Itemid=97" class="sublevel-suckerfish-horizontal">Local Productions</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_wrapper&Itemid=170&schedule=1" class="sublevel-suckerfish-horizontal">The War</a></li>
</ul>
</li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=35&Itemid=97&show=3" class="mainlevel-suckerfish-horizontal"><span class="expanded">Lakeland News at Ten</span></a>
<ul id="menulist_4-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=blogcategory&id=15&Itemid=34" class="sublevel-suckerfish-horizontal"><span class="expanded">News</span></a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=44&Itemid=110" class="sublevel-suckerfish-horizontal">Weather</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=blogcategory&id=17&Itemid=36" class="sublevel-suckerfish-horizontal"><span class="expanded">Sports</span></a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=38&Itemid=107" class="sublevel-suckerfish-horizontal">Meet the News Team</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=35&Itemid=97&show=3" class="sublevel-suckerfish-horizontal">Watch a Newscast</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=archivesection&id=1&Itemid=121" class="sublevel-suckerfish-horizontal"><span class="expanded">News Archives</span></a></li>
</ul>
</li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_weblinks&Itemid=23" class="mainlevel-suckerfish-horizontal"><span class="expanded">Links</span></a>
<ul id="menulist_5-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&task=view&id=53&Itemid=123" class="sublevel-suckerfish-horizontal">Government Contacts</a></li>
<li><a href="http://click.linksynergy.com/fs-bin/stat?id=v9Mowj676bY&offerid=119262.10000025&type=3" target="_blank" class="sublevel-suckerfish-horizontal">Shop PBS</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_wrapper&Itemid=163&schedule=1" class="sublevel-suckerfish-horizontal">War Story Collection</a></li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
/** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal,
a.mainlevel-suckerfish-horizontal:link, a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel-suckerfish-horizontal:visited, a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited {
background-color: 000000;
color: white;
font-weight: bold;
}
a.mainlevel-suckerfish-horizontal:hover, a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover {
background-color: #000000;
color: WHITE;
font-weight: bold;
}
a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal,
a.sublevel-suckerfish-horizontal:link, a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel-suckerfish-horizontal:visited, a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited {
color: white;
background-image: url("../images/grey-40.png");
}
a.sublevel-suckerfish-horizontal:hover, a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
background-color: #000000;
color: WHITE;
font-weight: bold;
}
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal,
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:link, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:link, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:link,
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:visited, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:visited, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:visited {
background-color: blue;
color: white;
font-weight: bold;
}
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:hover, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:hover, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:hover {
background-color: #E0E0E0;
color: White;
font-weight: bold;
}
ul.mainlevel-suckerfish-horizontal ul .expanded {
display: block;
background-image: url("../images/arrow_right.gif");
background-position: right center;
background-repeat: no-repeat;
padding-right: 10px;
}
/** customize style / layout here */
a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal, span.mainlevel-suckerfish-horizontal,
a.mainlevel-suckerfish-horizontal:link, a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel-suckerfish-horizontal:visited, a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited,
a.mainlevel-suckerfish-horizontal:hover, a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover,
a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal, span.sublevel-suckerfish-horizontal,
a.sublevel-suckerfish-horizontal:link, a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel-suckerfish-horizontal:visited, a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited,
a.sublevel-suckerfish-horizontal:hover, a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
font-weight: bold;
font-size: 100%;
text-align: left;
text-decoration: none;
display: block;
padding: 0.3em 0.3em 0.3em 0.5em; /* top, right, bottom, left */
height: 1em;
line-height: 1em;
white-space: nowrap;
border-bottom: 1px solid #000000; /***** Change is here *****/
}
a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal, span.mainlevel-suckerfish-horizontal {
float: left;
width: auto;
}
a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal, span.sublevel-suckerfish-horizontal {
font-size: 90%;
border-top: 0px solid silver;
}
#active_menu-suckerfish-horizontal,
a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal,
a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited,
a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover,
a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal,
a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited,
a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
font-weight: bold;
}
ul.mainlevel-suckerfish-horizontal, .mainlevel-suckerfish-horizontal ul {
padding: 0;
margin: 0;
list-style: none;
}
ul.mainlevel-suckerfish-horizontal {
width: auto;
z-index: 101;
}
ul.mainlevel-suckerfish-horizontal ul {
z-index: 102;
}
ul.mainlevel-suckerfish-horizontal ul ul {
z-index: 103;
}
ul.mainlevel-suckerfish-horizontal li {
padding: 0;
margin: 0;
background: none;
list-style: none;
float: left;
position: relative;
margin-right: 1px;
}
ul.mainlevel-suckerfish-horizontal li li {
position: relative;
width: 168px;
margin: 0;
}
ul.mainlevel-suckerfish-horizontal li li ul {
left: 10em;
top: 0;
}
ul.mainlevel-suckerfish-horizontal ul {
display: none;
position: absolute;
top: 1.65em;
left: 0;
}
ul.mainlevel-suckerfish-horizontal li > ul {
top: 1.65em;
left: auto;
}
ul.mainlevel-suckerfish-horizontal li:hover ul,
ul.mainlevel-suckerfish-horizontal li.hover ul {
display: block;
}
ul.mainlevel-suckerfish-horizontal li:hover ul ul,
ul.mainlevel-suckerfish-horizontal li.hover ul ul {
display: none;
}
ul.mainlevel-suckerfish-horizontal li:hover ul li:hover ul,
ul.mainlevel-suckerfish-horizontal li.hover ul li.hover ul {
display: block;
}
ul.mainlevel-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal li li {
clear: left;
}
/** separator */
span.mainlevel-suckerfish-horizontal, span.sublevel-suckerfish-horizontal {
border-width: 0px;
padding: 0px;
}
JS:
// based on http://www.alistapart.com/articles/dropdowns and http://www.htmldog.com/articles/suckerfish/dropdowns/
if ((document.all) && (document.getElementById)) {
function MenuListElementHoverFix() {
var _this = this;
if (typeof(Array.prototype.push) == 'undefined') {
// IE < 5.5 does not support push/pop
function push() {
var j = this.length;
for (var i = 0; i < push.arguments.length; ++i) {
this[j] = push.arguments[i];
j++;
}
}
function pop() {
var i = this[this.length - 1];
this.length--;
return i;
}
Array.prototype.push = push;
Array.prototype.pop = pop;
}
this.className = 'hover'; // change the class name to use here if you are not happy with it
this.classNameSuffix = ' ' + this.className;
this.removeClassNameRegExp = new RegExp("\\b ?" + this.className + "\\b");
this.hoverElementStack = new Array();
this.onmouseover = function() {
if (!_this.isHover(this)) {
if (this.getAttribute('is_hover_class_removing') != 'true') {
this.className += _this.classNameSuffix;
}
this.setAttribute('is_hover', 'true');
}
}
this.isHover = function(element) {
return (element.getAttribute('is_hover') == 'true');
}
this.checkNonHoverState = function(element) {
if (!_this.isHover(element)) {
element.className = element.className.replace(_this.removeClassNameRegExp, '');
}
element.removeAttribute('is_hover_class_removing');
}
this.checkLastNonHoverState = function() {
var hoverElement = null;
if (_this.hoverElementStack.length > 0) {
hoverElement = _this.hoverElementStack.pop();
}
for (var i = _this.hoverElementStack.length - 1; i >= 0; i--) {
// we need to apply the "non-hover" class to the children first - else the result is mixed in the IE
var o = _this.hoverElementStack[i];
while (o != null) {
o = o.offsetParent;
if (o == hoverElement) {
_this.checkNonHoverState(_this.hoverElementStack[i]);
break;
}
}
}
if (hoverElement != null) {
_this.checkNonHoverState(hoverElement);
}
}
this.onmouseout = function() {
// all this mess to not change the class immediately (which would cause flickering in the IE)
this.setAttribute('is_hover', 'false');
if (this.getAttribute('is_hover_class_removing') != 'true') {
this.setAttribute('is_hover_class_removing', 'true');
_this.hoverElementStack.push(this);
window.setTimeout(_this.checkLastNonHoverState, 100);
}
}
this.fixElement = function(elementRoot) {
for (var i=0; i < elementRoot.childNodes.length; i++) {
var node = elementRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = this.onmouseover;
node.onmouseout = this.onmouseout;
}
this.fixElement(node);
}
};
this.findElement = function(elementRoot) {
for (var i=0; i< elementRoot.childNodes.length; i++) {
var node = elementRoot.childNodes[i];
if (node.nodeName == "UL") {
if ((node.id != '') && ((node.id.indexOf("menu") >= 0) || (node.id.indexOf("nav") >= 0))) {
this.fixElement(node);
continue; // do not iterate through children of already fixed element
}
}
this.findElement(node);
}
};
this.fix = function() {
var node = document.body;
if (node) {
_this.findElement(node);
}
}
this.addOnLoad = function() {
if (window.attachEvent) {
window.attachEvent("onload", this.fix);
} else {
window.onload = this.fix;
}
}
}
(new MenuListElementHoverFix()).addOnLoad();
}
Any help would be greatly appreciated.
Thank you.