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

Donnie WalkerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

0
Donnie WalkerAuthor Commented:
the flyout has no background color...it shows as transparent in IE7. I have the csshover.htc as well.
0
Donnie WalkerAuthor Commented:
sorry...what I have works better than that menu.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

glumlunCommented:
ok, but have you ran your site in IE6?
0
Donnie WalkerAuthor Commented:
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.
0
glumlunCommented:
ok sorry.

im sure background images could be applied, but anyway i had a good look at the code you supplied and the problem was the display: block on the list and a elements

with this removed the bg images dont fill the list item, so i have moved the bg image to the list items and all is lovely in FF, struggling with a lack of indintation on the wrapped list item, but am tired, will have a nother look in the morning.
/* 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; list-style-position: outside;}
 
/* style the list items */
.menu li {
height:auto;
width: 172px;
line-height: 13px;
padding: 5px 0 5px 5px;
background: url(http://www.local808.com/sitez/images/bg_menu.gif);
 /* for IE7 */ 
 float:left;
 
 }
 /* 
.menu li.sub {background: url(http://www.local808.com/sitez/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 {
text-decoration:none;
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; position:relative;}
.menu li:hover {position:relative; background:#aa7;}
 
 
 
/* 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 {list-style-position: outside;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(http://www.local808.com/sitez/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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Donnie WalkerAuthor Commented:
looks alot better. what about the indentation?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.