Hi, I created a flyout menu using HTML and CSS. The list items have a white background. When hovered over, the list item background is purple. When the list item has a submenu, submenu list items are purple. My problem: When I hover over parent list item with submenu and go to submenu list items, parent list item goes back to white background. I want the parent list item background to remain at purple until the submenu is exited. Is there a way to do this? Jason CSS CODE #menu1 {font-family:"Arial", "Helvetica Condensed", sans-serif;font-size:12px;font-weight:bold} #menu1 ul{margin:0; padding:0; list-style:none; width:147px;/* Width of Menu Items */ border-bottom:1px solid #FFFFFF} #menu1 ul li{position:relative} #menu1 li ul{position:absolute;left:146px;/*Set 1px less than menu width */ top:0;display:block} #menu1 li:hover ul{display:block} #menu1 li:hover>ul{visibility:visible} #menu1 ul ul{visibility:hidden} /* Fix IE. Hide from IE Mac \*/ * html #menu1 ul li{float:left; height:1%} * html #menu1 ul li a{height:1%} /* End */ /* Make-up styles */ #menu1 ul, li{margin:0 0 0 0} /* Styles for Menu Items */ #menu1 ul a{border-left:1px solid #ffffff; border-right:1px solid #ffffff; border-top:1px solid #FFFFFF; display:block;text-decoration:none;color:#000000;background:#ffffff;/* IE6 Bug */ border-bottom:0px none; ; padding-left:10px; padding-right:5px; padding-top:5px; padding-bottom:5px} /* Hover Styles */ #menu1 ul a:hover{color:#ffffff;background:#5b2877} /* Sub Menu Styles */ #menu1 li ul a{border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; text-decoration:none;color:#FFFFFF;background:#5b2877;/* IE6 Bug */ border-bottom:0px none; ; padding-left:10px; padding-right:5px; padding-top:5px; padding-bottom:5px} /* Sub Menu Hover Styles */ #menu1 li ul a:hover{color:#ffffff;background:#9646c1;}
Its tricky because you're trying to have a hovered colour when its not being hovered directly anymore... I've worked SO much with menu's over the past year I should know this... I'll have a look around my folders.
I had a similar problem, and never fully solved it, but part of the solution lies with the "li" In a list, you'd have this: <ul> <li><a href="blah">First Main List Item</a> .. <ul> .. <li>sub 1</li> .. <li> sub 2</li> .. </ul> </li> </ul> Normally, the fact that sub 1 and sub2 are still within that first <li> should mean that they not only inherit the css values given to the parent <li>, but while you're hovering on the subs, you're still considered to be hovering on the Main as well. If the main button is also white and then purple on hover, you shouldn't need any classes because everyone has the same rules and are properly nested inside each other... My problem was that my mains had their own hover colours, different from the rest of the menu... so I had to give classes to the sub ul's so they could have their own CSS... which IE6 is ignoring (I must be doing something wrong because Stu's menu, whose I copied, at least changes the background with IE6 on hover). could you post your html? Because I think that's where the problem is.
Fantastic cross browser menu! <html> <head> <link rel="stylesheet" media="all" type="text/css" href="flyout.css" /> <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="flyout_ie.css" /> <![endif]--> </head> <body> <div id="showcase"> <div id="info"> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > <table><tr><td> <![endif]--> <ul> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../layouts/index.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../boxes/index.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../mozilla/index.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../ie/index.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../opacity/index.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html">OPACITY <table><tr><td> <![endif]--> </div> <!-- end .navholder --> Code (markup): flyout.css /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/flyoutt.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ /* common styling */ .menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:19px; font-size:11px;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#b3ab79;} .menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} .menu ul li:hover ul li a.hide {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover a.hide {width:150px;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px;} .menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;} .menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;} Code (markup): flyout_ie.css /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/flyoutt.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ table {border-collapse:collapse; border:0; margin:0; padding:0;} .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#b3ab79;} .menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} .menu ul li a:hover ul li a.sub {background:#dfc184; color:#000;} .menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff; width:150px;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:151px; top:0; color:#000;} .menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;} Code (markup): Hope this helps!
Thanks for posting the cross browser menu code le007. I took the code and got it to work with my flyout menu. Thanks for your interest in helping me also Stomme . J