Donnie Walker
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.
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;
}
ASKER
the flyout has no background color...it shows as transparent in IE7. I have the csshover.htc as well.
ASKER
sorry...what I have works better than that menu.
ok, but have you ran your site in IE6?
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
looks alot better. what about the indentation?
this is a great demo, that wil wrap correctly, and will work in all browsers, at least all that ive got!
Open in new window