How do I get the links in my nav to align beside other content?

Question

I am still learning and could use some help with what I am sure is a painfully simple mistake in my code. Any help would be greatly appreciated!

I am working on a website where the nav bar starts out as a small centered box with the company's logo, the word "Navigation" below it, and a small ">" arrow to the right of the logo.

When you mouseover the box, it expands to a wider rectangle, with an expanded logo to the far left. The word "Navigation" is still below it, but the arrow is gone. I accomplished both the logo swap and the hidden arrow using Dreamweaver's Behaviours panel. For the expanding nav box I used :hover.

Now, what I want is to have 4 Nav links appear when the box is expanded, which I again accomplished with Behaviours. The problem I am having is that the links are appearing below the box instead of inside of it. I have been searching online for hours and nothing I'm trying is working.

Screenshots of what is happening

<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

Header {
 background-color: #525252;
 height: 110px;
 width: 100%;
 margin: 0 auto;
 margin-top: -8px;
 text-align: center;
}
/*---------------------------Header End--------------------------*/


/*---------------------------NavBar Begin--------------------------*/
.Navbox {
 background-color: #BC1316;
 height: 105px;
 width: 100px;
 margin: 0 auto;
 margin-top: -8px;
 padding-left: 10px;
 padding-right: 0px;
 text-align: left;
 
}

.Navbox:hover {
 width: 480px;
 text-align: left;
 padding-left: 10px;
 padding-right: 0px;
}

.Nav {
 margin-top: 0;
}

#NavArrow {
 font-size: 18pt;
 float: right;
 margin-right: 8px;
 margin-top: 40px;
 margin-bottom: 0;
}

a {
 text-decoration: none;
 color: black;
}

#Navlinks {
}

.navlink {
 display: inline;
 position: relative;
}

<header>
  
  <nav>
   <div class="Navbox" onMouseOver="MM_showHideLayers('NavArrow','','hide');MM_swapImage('Image1','','img/ja-films-logo.gif',1);MM_showHideLayers('Navlinks','','show')" onMouseOut="MM_showHideLayers('NavArrow','','show');MM_swapImage('Image1','','img/ja-logo.gif',1);MM_showHideLayers('Navlinks','','hide')">
  <a href="index.html"><img src="img/ja-logo.gif" id="Image1"/></a>
  <p id="NavArrow">&#62;</p>
  <p class="Nav">Navigation</p>
   
    <ul id="Navlinks">
   <li class="navlink"><a href="#">About</a></li>
   <li class="navlink"><a href="#">Portfolio</a></li>
   <li class="navlink"><a href="#">Current Projects</a></li>
   <li class="navlink"><a href="#">Contact</a></li>
    </ul>
 </div>
 </nav>
 </header>

Edit: Here is what is happening now that I changed the display on .Nav and #Navlinks to inline

Answer 1

All that's needed is the following to solve that problem:

.Nav {
   margin-top: 0;
   display: inline;
}
#Navlinks {
  list-style-type: none;
  display: inline;
  margin-left: -40px ;
}  

So that after the paragraph isn't block and that the list doesn't make room for bullet points, display on the same line as "Navigation" and come around to meet "Navigation".

Also if you wanted you could add transition: width 1s ease; to .Navbox for a smooth transition.