1 Replies - 588 Views - Last Post: 06 July 2008 - 11:22 AM

#1 joeyadms  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 178
  • Joined: 04-May 08

Second button in fly-out not staying "hovered"

Posted 06 July 2008 - 10:12 AM

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
/* 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
<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

Is This A Good Question/Topic? 0
  • +

Replies To: Second button in fly-out not staying "hovered"

#2 joeyadms  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 178
  • Joined: 04-May 08

Re: Second button in fly-out not staying "hovered"

Posted 06 July 2008 - 11:22 AM

nevermind adding the following fixed it

.cssfly ul li:hover ul li:hover a{background:  url(menu4.gif);width:150px;}


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1