Navigation Menu Spillover

[jjf83]

I have a navigation menu that I am struggling to fit in this defined area. If I make the width of the navigation menu too long, it seems to clear the area. Is there a way to make the width of this menu long enough to work with, but not clear the area in which I want it located. I basically want the menu to spillover the parent div.

I created an illustration that will give you the best idea what I'm trying to do
http://img163.imageshack.us/img163/6871/spillover.jpg

<div id="top">
            <div class="wrapper">

                    <div id="logo">                        
                    </div> <!-- logo end -->
                    

                    <div id="menu">
                    	<ul>
                                                    
                            <a title="About Us" alt="About Us" href="about.html">
                            	<li>
                                	<p class="navtitle">About Us</p><p class="navp">Pledge of Service</p>
                                </li>
                            </a>

                            <a title="F.A.Q" alt="About Us" href="faq.html">
                            	<li>
                            		<p class="navtitle">F.A.Q</p><p class="navp">Fence Questions</p>
                                </li>
                            </a>

                            <a title="News" alt="News" href="news.html">
                            	<li>
                            		<p class="navtitle">News</p><p class="navp">The Latest</p>
                                </li>
                            </a>

                            <a title="Contact" alt="Contact" href="contact.html">
                            	<li>	
                                    <p class="navtitle">Contact</p><p class="navp">Get in Touch</p>
                                </li>
                            </a>

                        </ul>
                    </div> <!-- menu end -->
                    
            </div> <!-- wrapper end -->    
        </div> <!-- top end -->

.wrapper {
	margin: 0 auto;
	width: 960px;
}

#top {
	background:url(../images/topbg.jpg);
	background-repeat:repeat-x; 
	height:131px; 
	position:relative;
}

#logo	{
	float:left;
}

#menu {
	float:right;
	width:758px;
}

#menu ul {
	margin:0px; 
	padding:0px;
}

#menu li {
	display:block;
	float:left;
	padding:22px 32px 24px 15px;
	list-style-type:none;
	position:relative;
}

Any help or suggestions are appreciated. Thanks in advance

[sunfighter]

Take your menu out of the <div class="wrapper"> and put it into the <div id="top"> and position accordingly.