0

Hi I have a horizontal rollover menu with a horizontal submenu

I want the submenu to stay out when the use moves his cursor off the menu item unless the user rolls over another menu item

like on this site http://instantcom.es/

now I know that is a flash menu, but is it possible to do this in css.

I have menu working fine, but it can be quite tricky for the user to scroll along the horizontal submenu as it pops back up if the users mouse slightly strays off the submenu which is pretty narrow

many thanks in advance

my menu(which is dynamically created from a database)

<style>
#topmenu,#topmenu ul {padding:0;margin:0; }


#topmenu li {
	float:left;
	width:120px;
	position:relative;
	list-style-type:none;		
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:50px;
	height:50px;
	background-image:url(images/menu_yellow_bg.png);
	background-repeat:repeat-x;
	
}
#topmenu li a:link{
	
	color:#000;
	text-decoration:none;
	
}
#topmenu li a:visited{
	
	color:#000;
	text-decoration:none;
}
#topmenu li:hover{
	float:left;
	width:120px;
	position:relative;
	list-style-type:none;		
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:50px;
	background-image:url(images/menu_grey_bg.png);
	background-repeat:repeat-x;
	text-decoration:none;
}

#topmenu li a:hover{	
	color:#000;
	width:120px;
	height:50px;
	line-height:20px;
}



fieldset p {clear:left;}



#topmenu li:hover ul,
#topmenu li.msieFix ul {
	visibility:visible;
	width:0px;	
	color:#000;
	line-height:20px;
}

* html fieldset p {z-index:-1}
* html #topmenu li:hover ul,
* html #topmenu li.msieFix ul {
	top:50px;
	left:0px;
	color:#000;	
}


#topmenu li ul {
	visibility:hidden;
	position:absolute;
	width:0px;
	color:#000;
	text-align:left;
	line-height:20px;
	top:48px;
	left:0px;	
	 
}

#topmenu li ul li { width:100%;padding-top:2px;line-height:20px; text-align:left; padding-left:0px; height:22px;	}
#topmenu li ul li:hover { width:100%; color:#ffffff; line-height:20px; text-align:left;}

#topmenu li ul a {margin-left:0px; width:100%;color:#ffffff;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold;}
#topmenu li ul a:hover { width:100%;color:#979797; }
.low1
{
	position:absolute;
	width:100px;
	left:0px;
	text-align:center;
	background-color:#CCCCCC;
	
}
.low2
{
	position:absolute;
	width:105px;
	left:100px;
	text-align:center;
	background-color:#CCCCCC;
}
.low3
{
	position:absolute;
	width:100px;
	left:205px;
	text-align:center;
	background-color:#CCCCCC;

}
.low4
{
	position:absolute;
	width:90px;
	left:305px;
	text-align:center;
	background-color:#CCCCCC;

}
.menu_end_left
	{
		position:absolute;
		left:-13px;
		width:13px;
		height:100%;
		background-image:url(images/menu_yellow_left.png);
		background-repeat:no-repeat;
		z-index:2000
	}
.menu_end_right
	{
		position:absolute;
		left:600px;
		width:13px;
		height:100%;
		background-image:url(images/menu_yellow_right.png);
		background-repeat:no-repeat;
		z-index:2000
	}
.top_item
	{
		position:absolute;
		top:0px;
		height:52px;
		width:100%;
		left:0px;
		border:0px solid red;
		line-height:50px;
	}
.text
	{
		line-height:52px;
	}
	
	
</style>
<ul id="topmenu">
	<span class="menu_end_left"></span>
	<?
	
	$sql=mysql_query("SELECT * FROM menu ORDER BY position ASC");
	while($row=mysql_fetch_array($sql))
		{
		$ref=$row['ref'];
	?>
		<li onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
			<?  if($row['link']!='')
					{
						?><a class="top_item" href="<? echo $pre.$row['link']; ?>"><span class="text"><? echo $row[$lang]; ?></span></a><?
					}
				else
					{
						?><span class="text"><? echo $row[$lang]; ?></span><?
					}			
							
					$sql_sub=mysql_query("SELECT * FROM submenu WHERE ref='$ref' ORDER BY position ASC");
					if(mysql_num_rows($sql_sub)>0)
						{
						$i=1;
							?><ul>
								<li><?
									while($row_sub=mysql_fetch_array($sql_sub))
										{
											?><a href="<? echo $pre.$row_sub['link']; ?>"><span class="low<? echo $i; ?>"><? echo $row_sub[$lang]; ?></span></a> <?
											$i++;
										}
									?>
								</li>
							</ul><?
						
						}
					
				?>
		</li>			
		<?
		}
		?>
		<span class="menu_end_right"></span>
	</ul>

Barry

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by harrierdh
0

You can't control the hover with CSS. You'll need some scripting. You could create a hidden div to hold your sub menu and position it off the page. Then when the user hovers you could slide it into position. When the user hovers over another drop down menu you'd slide that one into position and move the other one off the page.

Or you could have a hidden div that you make visible when the user hovers. "onMouseOver".

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.