I have a css flyout I'm working on. It has 3 levels. Whenever the first level is hovered over and the second menu pops out, the first level button stays hovered.
Whenever you descend into the third level, however, the second level's button does not stay hovered.
I'm looking through it and trying things, but it would be nice to have an extra set of eyes looking at it, I'm sure its right in front of my eyes.
Here is the css
CODE
/* common styling */
.cssfly {
font-family: arial, sans-serif;
width:150px;
height:150px;
position:relative;
margin:0;
font-size:11px;
margin:1px 0;
}
.cssfly ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:150px;
height:24px;
text-align:left;
padding: 8px 0 0 15px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background: url(menu4.gif) 0 -32px;
color:#FFFFFF;
line-height:19px;
font-size:12px;
}
.cssfly ul {padding:0; margin:0;list-style-type: none; }
.cssfly ul li {float:left; margin-right:1px; position:relative;}
.cssfly ul li ul {display: none;}
/* specific to non IE browsers */
.cssfly ul li:hover a {color:#fff; background:#000; background: url(menu4.gif);}
.cssfly ul li:hover ul {display:block; position:absolute; top:0; left:166px; width:105px;}
.cssfly ul li:hover ul li a.hide {background:url(menu4.gif); color:#fff;}
.cssfly ul li:hover ul li:hover a.hide {width:150px;}
.cssfly ul li:hover ul li ul {display: none;}
.cssfly ul li:hover ul li a {display:block; background:url(menu4.gif) 0 -32px;color:#fff; width:150px;}
.cssfly ul li:hover ul li a:hover {background:url(menu4.gif); color:#fff;}
.cssfly ul li:hover ul li:hover ul {display:block; position:absolute; left:166px; top:0; color:#000;}
.cssfly ul li:hover ul li:hover ul li a {display:block; width:150px; background:url(menu4.gif) 0 -32px; color:#fff;}
.cssfly ul li:hover ul li:hover ul li a:hover {background:url(menu4.gif); color:#fff;}
The html is just basically
CODE
<div class='cssfly'>
<ul>
<li><a href="#">Level1</a>
<ul>
<li><a href="#">Level2</a>
<ul>
<li><a href="#">Level3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Thanks for any help
6 Jul, 2008 - 09:12 AM
| 