asked on

Pure CSS Vertical Menu - How to Autosize for Menu Name?

I have this pure CSS flyout menu at:
http://www.local808.com/sitez/default.asp?id=61&p=2&c=0&t=1&action=site
it works fine except for one problem. It does not expand or allow for word wrap when the menu item is longer than the flyout. If you hover over 'CONSTITUTION' you can see that some of the menu items do not display correctly. I would like the flyout menus to either expand horizontally to accommodate the menu name or expand vertically to show the menu name word wrapped.

/* MENU STYLES *****************************************/
 
.menu {height:150px; font-size:75%; text-align:left; margin:25px 0 50px 15px; /* this page only */}
 
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {position:relative;z-index:500;padding:0;margin:0;list-style-type:none; width:180px;}
 
/* style the list items */
.menu li {height:auto; /* for IE7 */ float:left;}
.menu li.sub {background:url(../images/sub.gif) no-repeat right center;} 
 
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
 
/* style the links */
.menu a, .menu a:visited {background:url('../images/bg_menu.gif'); repeat-y;display:block; text-decoration:none;height:25px;line-height:25px;width:180px;color:#fff;text-indent:5px;}
 
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:180px; w\idth:179px;}
 
/* style the link hover */
* html .menu a:hover {color:#efa; background:#aa7; position:relative;}
.menu li:hover {position:relative;}
 
/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color:#efa; background:#aa7;}
 
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#efa; background:#aa7;}
 
 /* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {visibility:hidden;position:absolute;top:-30px;/* set up the overlap (minus the overrun) */left:145px;/* set up the overrun area */ padding:30px; /* this is for IE to make it interpret the overrrun padding */background:transparent url(../images/transparent.gif);}
 
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
 
/* for IE5.5 and IE6 you need to style each level hover */
 
/* keep the third level+ hidden when you hover on first level link */
.menu ul a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
.menu ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
.menu ul a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
 
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
/* make the third level visible when you hover over second level link */
.menu ul a:hover ul a:hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level link */
.menu ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}

Open in new window

glumlun

hi, i started to work on this, however the fly out nav doesnt work on IE6 at all.
this is a great demo, that wil wrap correctly, and will work in all browsers, at least all that ive got!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> 
 
<title>CSS Flyout - Part One Demo</title>
 
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" /> 
<meta name="mssmarttagspreventparsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
 
<style type="text/css">
 
html, body, ul, li {margin: 0; padding: 0; border: 0;}
 
body {
	color: #000; 
	margin: 0 30px;			 
	background: #eee;
	font-size: 100.01%;
	font-family: verdana, sans-serif;
	text-align: center;
}
 
.wrapper {
	width: 770px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	border: 1px solid #666;
	background: #fff;
	text-align: left;
}
	
h1 {color: #99d; font-size: 1.4em;}
	
h2 {font-size: 1em; font-family: verdana, sans-serif; margin: 10px;}
	
p {color: #000; font-size: .9em; margin: .6em 10px;}
 
.navholder {
	width: 8em;
	float: left;
	display: inline; /* doubled margin bug fix for IE/win */
	margin: 15px 20px 5px 20px;
}
 
ul {
  	width: 8em;
	border-top: 1px solid #000; /* Makes top border on flyouts */
	background: #edc;
	}
 
li {
	list-style: none; /* kills the list item "bullet" markers */
	position: relative;
	font-weight: bold;
	font-family: arial, sans-serif;
	border-left: 1px solid #000; /* Makes side borders on flyouts */
	border-right: 1px solid #000; /* Makes side borders on flyouts */
	border-bottom: 1px solid #000; /* Makes bottom border on flyouts */
	vertical-align: bottom; /* for IE5/win */
	}
 
ul a {
	display: block;
	padding: 5px 10px;
	vertical-align: bottom; /* needed for IE5/win */
	text-align: center;
	text-decoration: none;
	color: #552;
	}
 
ul ul { 
	position: absolute;  
	left: -3000px;
	background: #fed; 
	}	/* flyout elements need a background image or color to avoid bugs in IE/win */
		
li:hover {background: #ddf;}
	
ul li:hover ul {
	left: 7em;
	top: 4px;
}
 
ul a:hover {text-decoration: underline;}
	
/* \*/ /*/ 
ul li ul {position: static;}
/* */
 
/* The block above hides the rule inside so that only IE5/Mac can see it.
This rule causes the menus to be fully expanded vertically in that browser,
allowing those users to access the navigation without needing to hover it. */
 
</style>
 
<!-- The following block is a conditional comment, and only IE/Win browsers will
look inside the special "if IE" section. Within are the Jscript call, some height
bug fixes, the margin-left hacks for older IE/Wins, and a noscript block. Inside
the noscript block is another style block which also expands the menu similarly to 
IE5/Mac, but it does this only when IE/Win is JavaScript disabled, and could not 
otherwise access the menu flyouts. All these rules and the ones for IE5/Mac above 
should follow the main styling, so that these "dumbed down" rules will override 
the main rules. If they precede the main rules, then the nav can never be
expanded for IE5/Mac, or IE/Win when in non-scripting mode. -->
 
<!--[if IE]>
 
      <style type="text/css">
      
        body {behavior: url(csshover.htc);}
        
        ul a, ul, li {height: 1%;} /* Holly hack fix for IE bugs */
        		
        li {
        	margin-left: -16px;
        	mar\gin-left: 0;
        } /* special rules to correct older IE/win bullet zone problems */
      
      </style>
 
      <noscript>
        <style type="text/css">
      
	 		ul ul {position: static;}
      
        </style>
      </noscript>
			
<![endif]-->
 
</head>
 
<body> 
 
<div class="wrapper">
 
<div class="navholder">
	<ul>
		<li style="z-index: 10;"><a href="#">Home</a>
			<ul>
				<li><a href="#">Table of Contents</a></li>
				<li><a href="#">Site MapGuest Book Guest Book Guest Book</a></li>
				<li><a href="#">Guest Book Guest Book Guest Book Guest Book</a></li>
			</ul>
		</li>
		<li style="z-index: 9;"><a href="#">About Us</a>
			<ul>
				<li><a href="#">Resume</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Future Goals</a></li>
			</ul>
		</li>
		<li style="z-index: 8;"><a href="#">Galleries</a>
			<ul>
				<li><a href="#">People</a></li>
				<li><a href="#">Places</a></li>
				<li><a href="#">Things</a></li>
			</ul>
		</li>
		<li style="z-index: 7;"><a href="#">Articles</a>
			<ul>
				<li><a href="#">Current</a></li>
				<li><a href="#">Favorites</a></li>
				<li><a href="#">Archive</a></li>
			</ul>
		</li>
	</ul>
</div> <!-- end .navholder -->
		
<h1>Demo for CSS Flyouts - Part One</h1>
 
<p>
The construction is a simple nested set of lists, and is completely controlled and 
styled via the CSS. Scripting is used only for the purpose of making IE/Win obey
the :hover rules on non-links.
</p>
 
<p>
This method works very well in IE5 through IE6, all fairly recent Gecko browsers,
Opera 7, and Safari, but not in Explorer for the Mac, which fails to support the basic 
popup method. IE5/Mac may be made to show the entire nested list set via a special targeted 
rule, so that those users can access all the links.
</p>
 
<div style="clear: both;">&nbsp;</div>
 
</div> <!-- end .wrapper -->
 
</body>
</html>

Open in new window

Donnie Walker

ASKER

the flyout has no background color...it shows as transparent in IE7. I have the csshover.htc as well.

Donnie Walker

ASKER

sorry...what I have works better than that menu.

glumlun

ok, but have you ran your site in IE6?

Donnie Walker

ASKER

yes. as well as v5 and v5.5 (using MultipleIE) and I can display the sub menus on the page that loads so I don't need the flyout for old brower users (which according to my stats everyone so far is visiting with IE7 or FireFox).

the menu you offered does not show a background for the flyout menus. I added a background color to every LI and UL in the css and it still showed a transparent flyout in IE and FireFox.

not a good example.

ASKER CERTIFIED SOLUTION

glumlun

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Donnie Walker

ASKER

looks alot better. what about the indentation?