...

View Full Version : CSS Suckerfish dropdown menu



24jedi
12-20-2005, 03:03 PM
I am working on a template for a modx (http://modxcms.com) 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 ?

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

ronaldb66
12-20-2005, 03:24 PM
If you want to get by without child selectors, you'll have to add selectors to specifically address the second level sub menus.

I had a similar menu on a test page and tested it out in IE; basically, to address the first sub-level, you'd use a selector like:

li ul {
...
display: none;
} You need to add this for the second sub-level:

li ul, li ul li ul {
...
display: none;
}
To turn on the sub menu whoms list item is hovered over, there should be something like:

li:hover ul {
display: block;
} Again, you'll need to add:

li:hover ul, li:hover ul li:hover ul {
display: block;
} If you still run into specificity problems, adding different classes to the different levels of sub menus should fix that (like submenu, subsubmenu).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum