Issue with menu animation

**chadlexmorgan** · 08-19-2013, 11:49 PM

http://www.rezzurrectiontaxidermy.com

All I did was add an image to the page and now the menu is acting goofy. The blocks that highlight each menu item have some how moved to the other side of the items. The code in red is what I added.

Code:

<body >

<div id="pagewrap">
		
	<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;overflow:hidden;"></div>
		

	<div id="content1">		
		<div id="filter"></div>		
		<div id="white_line"></div>
		<div id="menu">
			<span></span>
			<ul>
				<li class="item1"><a href="#">Gallery</a></li>
				<li class="item2"><a href="#">Field Care</a></li>
				<li class="item3"><a href="#">Braggin' Rights</a></li>
				<li class="item4"><a href="#">Contact</a></li>
				
			</ul>
			
		</div>
	</div>
		<div id="logo"><a href="./index.html"><img src="./Rez_Pics/RezzTax-Black2.png"></a></div>
		<div id="FaceBook"><a href="./index.html"><img src="./Rez_Pics/camo-facebook-icon.png" /></a></div>
</div>

			<div id="slideshowholder">
			<div id="fadeshow1"></div>
			<div id="slideshowtoggler">
				<a href="#" class="prev">		
					<img src="./Rez_Pics/left.png" style="border-width:0" /></a> 
						<span class="status" style="margin:0 50px; font-weight:bold"></span> 
				<a href="#" class="next">
					<img src="./Rez_Pics/right.png" style="border-width:0" /></a>
			</div>
			</div>



</body>
</html>

and in the css I added...

Code:

body {	
	color: #ffffff;	
	font-family: "Arial", Arial, sans-serif;	
	font-size: 12px;
	background: #000;
	overflow:hidden;
	
}

#FaceBook{
	position:absolute;
	width: 100%;
	height: 100%;
	top: 750px;
	margin-left: -35px;
	left: 5%;
}

#bg {
	background: transparent;
	position:fixed; 
	overflow:hidden;
	top:0px; 
	left:-5%; 
	width:105%;
}

a {
	text-decoration: none;
	color: #0066ff;
}

a:focus {
	outline:0;
}



a :hover{
	text-decoration: none;
}	 

#filter{ 
	width:100%; 
	height:100%; 
	z-index:0;
	position:absolute;
	left:0;
	top:0; 
	background: url(../Rez_Pics/filter.png) repeat left top transparent;
}


#logo{
	position:absolute;
	width:100%;
	height:100%;
	top: 20px;
	left: 50%;
	margin-left: -250px;
}


#container{	
	position: relative;		
	width:900px;
	left:50%;
	margin-left:-450px;	
	top:120px;
	z-index:1;
}

#white_line{
	height:1px;
	width:100%;
	position:absolute;
	z-index:98;
	background: #fff;
	left:0;
	top:79px;
}


#menu{
	margin-left:50px;
	padding-top:90px;
	margin-top: 60px;
	background: url(../Rez_Pics/menu.png) no-repeat 0px top;
	width:164px;
	overflow:visible;
	position:absolute;
	z-index:99;
}

#menu span{
	width:200px;
	height:50px;
	display:block;
	margin-top:-90px;
	cursor: pointer;
}


#menu ul{
	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-size:13px;
	width:auto;
	height:auto;	
}

#menu ul li{
	margin-left:-200px;
	background: url(../Rez_Pics/li.png) repeat 150px top;
	width:200px;
	padding-left:10px;
}

#menu ul li a{
	color: #000;
	font-size:17px;
	font-style:italic;
}


#content {
	width:100%;
	position:fixed;
	top:70%;
	height: 10%;
	background: url(../Rez_Pics/transparentbg.png) repeat 150px top;
	overflow:hidden;
}

#content p{
	padding:30px;
}

Not understanding why that would affect anything.