Hide Sub Menu

Hi,

I am using the source code from this site:
http://www.styledmenus.com/2008/12/jogi-css-menu.html

I am trying to hide the sub-menu and expand when clicked.
I read in some sites saying I need to use javascript as IE will have problems in pure css ? How do i go about doing this?

<div id="menu">
	<ul>
		<li><a href="#">home</a></li>
		<li><a href="#" class="green">about us</a>
          <ul>
		    <li><a href="#">Test Sub 1</a></li>
	        <li><a href="#">Test Sub 2</a></li>
		  </ul>

        </li>
     		<li><a href="#" class="blue">services</a></li>
		<li><a href="#" class="orange">solutions</a></li>
		<li><a href="#" class="brn">contact us</a></li>								
	</ul>
</div>
</body>
</html>

/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
----------------------------*/
*{
	margin:0;
	padding:0;
}
body{
	background:#fff;
	color:#666;	
	font:12px/18px Tahoma, Arial, Helvetica, sans-serif;	
}
	#menu{
		background:#fff;
		width:170px;
	}
		#menu ul{
			list-style:none;
		}
			#menu li{
				list-style:none;
				margin:2px 0;
			}
				#menu li a{
					list-style:none;
					background:#82837c;
					color:#fff;
					text-transform:uppercase;
					font-size:11px;
					font-weight:bold;
					text-decoration:none;
					border:solid #777776;
					border-width:0 6px 0 6px;
					display:block;
					height:30px;
					line-height:30px;
					padding:0 0 0 10px;
				}
					#menu li a:hover{
						background:#777776;
						color:#fff;
						text-decoration:none;
					}
				#menu li a.green{
					background:#83ad3e;
					border:solid #6f9234;
					border-width:0 6px 0 6px;
				}
					#menu li a:hover.green{
						background:#6f9234;
					}
				#menu li a.blue{
					background:#4396bd;
					border:solid #377e9f;
					border-width:0 6px 0 6px;
				}
					#menu li a:hover.blue{
						background:#377e9f;
					}
				#menu li a.orange{
					background:#ff7327;
					border:solid #d65611;
					border-width:0 6px 0 6px;
				}
					#menu li a:hover.orange{
						background:#d65611;
					}
				#menu li a.brn{
					background:#a53cbe;
					border:solid #87249f;
					border-width:0 6px 0 6px;
				}
					#menu li a:hover.brn{
						background:#87249f;
					}




Hi,

If you want the submenu to appear and disappear when clicked then you will need Javascript for all browsers. Here’s a basic example.

Basically the submenu is placed off screen when not needed and then brought back into view when required.

If you want to do a flyout menu on [B]hover[/B] then you only need a little js for IE6 only (assuming you have a full doctype).

In your example you would need to add code like this to hide the menu (ie6 would need the JS helper already mentioned).


#menu li ul {
    margin-left:-999em;/* hide initially  off screen  */
    height:0;
    overflow:hidden;
}
#menu li:hover ul {/* this should really be handled when clicked not hovered*/
    margin-left:0;
    height:auto;
    overflow:visible;
}


thanks for the links and codes.
will try them out.

Happy new year to you btw. :smiley: