working with 2 <div>'s

[westman]

hi there,I have 2 div's my 1st div is a menu with a bit of css3 in it and the 2nd div is animated art work from adobe edge. what i need:i need the animated div to work in the background of the 1st div and bring the 1st div to the front of the stage the problem:the 2nd div is overlapping the 1st div and stopping the menu from working properly my code:

<style type="text/css">/* main menu styles */#nav {	display:inline-block;	width:100%;	margin:0px auto;	padding:0;	background:#008000 url(../image/bg.png) repeat-x 0 -110px;	border-radius:10px; /*some css3*/	-moz-border-radius:10px;	-webkit-border-radius:10px;	box-shadow:0 2px 2px rgba(0,0,0, .5);	-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);	-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);}#nav li {	margin:10px;	float:left;	position:relative;	list-style:none;}#nav a {	font-weight:bold;	color:#e7e5e5;	text-decoration:none;	display:block;	padding:8px 20px;	border-radius:10px; /*some css3*/	-moz-border-radius:10px;	-webkit-border-radius:10px;	text-shadow:0 2px 2px rgba(0,0,0, .7);}/* selected menu element */#nav .current a, #nav li:hover > a {	background:#42FF42 url(../image/bg.png) repeat-x 0 -20px;	color:#000;	border-top:1px solid #f8f8f8;	box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/	-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);	-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);	text-shadow:0 2px 2px rgba(255,255,255, 0.7);}/* sublevels */#nav ul li:hover a, #nav li:hover li a {	background:none;	border:none;	color:#000;}#nav ul li a:hover {	background:#0F0 url(../image/bg.png) repeat-x 0 -100px;	color:#fff;	border-radius:10px; /*some css3*/	-moz-border-radius:10px;	-webkit-border-radius:10px;	text-shadow:0 2px 2px rgba(0,0,0, 0.7);}#nav ul li:first-child > a {	-moz-border-radius-topleft:10px; /*some css3*/	-moz-border-radius-topright:10px;	-webkit-border-top-left-radius:10px;	-webkit-border-top-right-radius:10px;}#nav ul li:last-child > a {	-moz-border-radius-bottomleft:10px; /*some css3*/	-moz-border-radius-bottomright:10px;	-webkit-border-bottom-left-radius:10px;	-webkit-border-bottom-right-radius:10px;}/* drop down */#nav li:hover > ul {	opacity:1;	visibility:visible;}#nav ul {	opacity:0;	visibility:hidden;	padding:0;	width:175px;	position:absolute;	background:#95FF95 url(../image/bg.png) repeat-x 0 0;	border:1px solid #7788aa;	border-radius:10px; /*some css3*/	-moz-border-radius:10px;	-webkit-border-radius:10px;	box-shadow:0 2px 2px rgba(0,0,0, .5);	-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);	-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);	-moz-transition:opacity .25s linear, visibility .1s linear .1s;	-webkit-transition:opacity .25s linear, visibility .1s linear .1s;	-o-transition:opacity .25s linear, visibility .1s linear .1s;	transition:opacity .25s linear, visibility .1s linear .1s;}#nav ul li {	float:none;	margin:0;}#nav ul a {	font-weight:normal;	text-shadow:0 2px 2px rgba(255,255,255, 0.7);}#nav ul ul {	left:160px;	top:0px;}</style>	<script type="text/javascript" charset="utf-8" src="../anim_edgePreload.js"></script>	<style>		.edgeLoad-EDGE-16622662 { visibility:hidden; }	</style>  <div style="width:700px; height:200px;">	<ul id="nav">		<li class="current"><a href="#">Home</a></li>		<li><a href="#">My Account</a>		   <ul>						<li><a href="#">Manage My Account</a></li>						<li><a href="#">Update Login Info</a></li>					</ul>		</li>		<li><a href="#">Main menu</a>			<ul>				<li><a href="#">itme1</a>				 <ul>						<li><a href="#">itme11</a></li>						<li><a href="#">itme12</a></li>					</ul>				</li>				<li><a href="#">itme2</a></li>				<li><a href="#">itme3</a></li>				<li><a href="#">itme4</a></li>				<li><a href="#">itme5</a></li>				<li><a href="#">itme6</a>				 <ul>						<li><a href="#">itme61</a></li>						<li><a href="#">itme62</a></li>					</ul>				</li>				<li><a href="#">itme7</a></li>			</ul>		</li>		<li><a href="#">menu 2</a>			<ul>				<li><a href="#">itme1</a>					<ul>						<li><a href="#">itme2</a></li>						<li><a href="#">itme3</a></li>					</ul>				</li>				<li><a href="#">itme99</a>					<ul>						<li><a href="#">itme25</a></li>						<li><a href="#">itme26</a></li>					</ul>				</li>			</ul>		</li>		<li><a href="#">Help</a></li>		<li><a href="#">Log out</a></li>	</ul> <div id="Stage" class="EDGE-16622662"></div></div>

any help?

Edited January 3, 2013 by westman

[umanga]

Try using "z-index" in #nav.I am sure your problem gets solved. Tutorial:http://www.w3schools.com/cssref/pr_pos_z-index.asp

Edited March 8, 2013 by umanga