Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Suckerfish dropdown menu

    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
    Code:
    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.
    Code:
    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.

    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Long selectors

    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:
    Code:
    li ul {
    ...
    display: none;
    }
    You need to add this for the second sub-level:
    Code:
    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:
    Code:
    li:hover ul {
    display: block;
    }
    Again, you'll need to add:
    Code:
    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).
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •