I am working on a template cms. I am having trouble with the css menu. The following HTML/CSS is strictly static. When I am able to get it working, I will port over to the template.
1. I can get the first and second level menu hyperlinks to work in both IE6 and Firefox 1.0.7. But I am having problems with more than two levels always displaying. You can see the issue when you hover over the last menu link "Page Four".
Test page:
http://www.munyak.com/lp/index.htm
li:hover ul, li.over ul { display: block;}
2. If I change the
li:hover, I can make multi-levels work properly in Firefox using the following.
li:hover > ul, li.over > ul { display: block;}
This was a hack I figured out when looking at Eric Meyers css for "pure css menus" and applied to the suckerfish css. Again, looking at the last menu link, the thrid sub-level does not display until after hovering over the link for sub 4-3
However, in IE6, only the first level menu links function. All sub-levels will not display
Test page:
http://www.munyak.com/lp/page2.htm
How can I make (2) work in both IE6 and Firefox ?
I will eventually be trying to make this work by using the ListMenu snippet. If you have any comments regarding this, I would be greatful.
The following is not the entire page. The css is snipped from my css page. The javascript is the only javascript in the page. It is from the suckerfish dropdown menu article.
<style type="text/css">
/*
http://www.alistapart.com/articles/dropdowns
This css scheme derived from "suckerfish" concept. (ALA)
*/
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
float:right;
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: -149px;
top: 0;
display: none;
}
ul li a {
font:bold 11px/16px arial, helvetica, serif;
display: block;
color: #777;
background: #ffc; /*yellow*/
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
text-decoration:none;
}
ul li a:hover {
font:bold 11px/16px arial, helvetica, serif;
display: block;
color: #a00;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
text-decoration:none;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
/* (1)-This displays all submenus in both ie/firefox */
li:hover ul, li.over ul { display: block;}
/* (2)-This only shows submenus in firefox. submenus in IE do not display
li:hover > ul, li.over > ul { display: block;}
*/
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
<div id="sidebar">
<ul id="nav">
<li><a href="index.htm" title="Page One">Page One</a></li>
<li><a href="#" title="Page One">Page Two ...</a>
<ul>
<li><a href="#" title="Page One">sub 2-1</a></li>
<li><a href="#" title="Page Two">sub 2-2</a></li>
</ul>
</li>
<li><a href="#" title="Page Three">Page Three ...</a>
<ul>
<li><a href="#" title="Page One">sub 3-1</a></li>
<li><a href="#" title="Page Two">sub 3-2</a></li>
</ul>
</li>
<li><a href="#" title="Page four">Page Four ...</a>
<ul>
<li><a href="#" title="Page One">sub 4-1</a></li>
<li><a href="#" title="Page Two">sub 4-2</a></li>
<li><a href="#" title="Page Two">sub 4-3 ...</a>
<ul>
<li><a href="#" title="Page One">sub 4-3-1</a></li>
</ul>
</li>
<li><a href="#" title="Page Two">sub 4-4</a></li>
</ul>
</li>
</ul>
</div>
Thanks, Don
☆ A M B ☆
MODX Staff
