First off here is a link to my site http://www.rezzurrectiontaxidermy.com.

If you look at the menu, the third item down is "braggin' rights" I'm wanting to get this on the same line. But everything I've tried totally messes up the menu animation. Any help would be appreciated. Let me know if you need more clarification. Here is the code for that page. What is in red is the script for the menu. It also calls some other js files and has a css file to go with it as well.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rezzurrection Taxedermy</title>
t<link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/media-queries.css" type="text/css"/>
<style type="text/css">
#fadeshow1 {
	position: absolute !important;
	bottom: 30px;
	left: 50%;
	margin-left: -500px;
}
#slideshowtoggler {
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
}
#slideshowholder {
	position: fixed;
	bottom: -530px;
	left: 0;
	width: 100%;
}
#coninfo {
	position: absolute !important;
	bottom: 30px;
	left: 50%;
	margin-left: -500px;
}

#map_canvas {
	position: absolute;
	bottom: 30px;
	left: 125%;
	margin-left: -1000px;
	width: 500px;
	height: 500px;
}

#contactholder{
	position: fixed;
	bottom: -530px;
	left: 0;
	width: 100%;
}
 
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow:hidden;
} 

#filter{
	position: fixed;
}

</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.delay.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>



<script>
	$(document).ready(function() {	
		$('.item4 a').click(function(){
			$('#contactholder').animate({bottom: 0}, 800); return false;
		});
		$('#menu li a').not('.item4 a').click(function(){
			$('#contactholder').animate({bottom: -530});
		});
		$('.item2 a').click(function(){
			$('#slideshowholder').animate({bottom: 0}, 800); return false;
		});
		$('#menu li a').not('.item2 a').click(function(){
			$('#slideshowholder').animate({bottom: -530});
		});
		$("#menu, #white_line, #logo").css("opacity","0");
		$("#menu").stop().animate({
				opacity: 0.9,
				marginLeft: '50px' 
		}, 2400, 'easeInSine');
		$("#white_line, #logo").stop().animate(
			{opacity: 0.7},
			{duration:2400,easing: 'easeInSine'
		})
	
		$('#menu span').mouseenter(function(element) {
			$("#menu ul li").css("opacity","1");
			$('#white_line').stop().animate(
				{top: 40, height:290},
				{duration:500,easing: 'easeOutBack'}
			)
			$("#menu ul li").eachDelay(function(){ 
				$(this).stop().animate({
				opacity: 1,
				marginLeft: '0px',
				backgroundPosition: "150px 0px"
				}, 600, 'easeOutBack');			
			}, 30);			
		});
		
		$('#menu').mouseleave(function(element) {
			$("#menu ul li").eachDelay(function(index){ 
				$(this).stop().animate({
				opacity: 0,
				marginLeft: '-200px',
				backgroundPosition: "150px 0px"
				}, 600, 'linear');	
				if(index == $("#menu ul li").size() -1){
					$('#white_line').stop().animate(
						{top: 79, height:1},
						{duration:600,easing: 'easeInBack'
					})
				}
			}, 30);
			
			
		});
		
		
		
		
		$('#menu ul li').mouseenter(function(element) {			
			$('#menu ul li').not(this).stop().animate({
				backgroundPosition: "150px 0px",
				opacity: '0.5' 
			}, 500, 'linear');
			$(this).stop().animate({
				backgroundPosition: "300px 0px",
				opacity: '1' 
			}, 600, 'easeOutBounce');	
			$(this).find('a').css("color","#916153");
		});
		
		$('#menu ul li').mouseleave(function(element) {			
			$(this).stop().animate({
				backgroundPosition: "150px 0px",
				opacity: '1' 
			}, 200, 'linear');	
			$(this).find('a').css("color","#000");
		});
		
	});
</script>

<script type="text/javascript" src="js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">
var $ = jQuery;
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [1000, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["./Rez_Pics/Slide1.png"],
		["./Rez_Pics/Slide2.png"],
		["./Rez_Pics/Slide3.png"],
		["./Rez_Pics/Slide4.png"],
		["./Rez_Pics/Slide5.png"],
		["./Rez_Pics/Slide6.png"],
		["./Rez_Pics/Slide7.png"],
		["./Rez_Pics/Slide8.png"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "none",
	togglerid: "slideshowtoggler"
})

</script>
<!--[if lt IE 9]>
<style type="text/css">
#bg {
	background-image: none !important;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
}
</style>
<![endif]-->
</head>
<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="https://www.facebook.com/RezzurrectionTaxidermy" rel="external"><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>
			<div id="contactholder">
				<div id="coninfo"><img src="./Rez_Pics/ContactInfo.png"></div>
				<div id="map_canvas">
					<iframe width="500" height="500" frameborder="0" scrolling="no" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=2788+highway+ff,+eureka+mo&amp;aq=&amp;sll=38.304661,-92.437099&amp;sspn=6.886173,9.876709&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=2788+FF,+Eureka,+Missouri+63025&amp;ll=38.460982,-90.65094&amp;spn=0.033604,0.04283&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
				</div>
			</div>
						

</body>
</html>