No replies
monstruo
Offline
newbie
Last seen: 13 years 27 weeks ago
Joined: 2009-05-27
Posts: 1
Points: 0

Hello everyone,

I have a little problem. I created 2 divs and when i do hover on one of them i want to appear next to them some other divs with display:none/block.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
 
</title>
<style type="text/css">
#menu {	
	width:50px;
	border:1px solid blue;
	float:left;
	}
 
#menu1, #menu2 {
	background-color:black;
	border:1px solid blue;
	color:white;
	}
 
#submenu1 {
	margin-left:53px;
	<span style="font-style:italic">position:absolute;</span>
	width:100px;
	border:1px solid blue;
	float:left;
	<span style="font-style:italic">display:none;</span>
	}
 
#submenu2 {
	margin-left:53px;
	<span style="font-style:italic">position:absolute;</span>
	width:100px;
	border:1px solid blue;
	float:left;
	<span style="font-style:italic">display:none;
</span>	}
 
<span style="font-weight:bold">#menu1:hover > #submenu1 {
	margin-left:53px;
	position:absolute;
	width:100px;
	border:1px solid blue;
	float:left;
	<span style="font-style:italic">display:block;
</span>	}
 
#menu2:hover > #submenu2 {
	margin-left:53px;
	position:absolute;
	width:100px;
	border:1px solid blue;
	float:left;
	<span style="font-style:italic">display:block;</span>
	}</span>
 
</style>
 
</head>
<body>
 
	<div id="menu">
		<div id="menu1">menu 1</div>
		<div id="menu2">menu 2</div>
	</div>
	<div id="submenu1">
		<div>Submenu 1</div>
		<div>Submenu 2</div>
	</div>
	<div id="submenu2">
		<div>Submenu 11</div>
		<div>Submenu 22</div>
	</div>
</body>
</html>

Thank you in advanced and please excuse my bad english.

Ionut - Romania.