Responsive CSS-3 Menu Bar

Here is the responsive CSS-3 Menu bar that i created , [the entire code is not mine though].

Well here are a few difficulties i have ,

1st check out the Jsfiddle Fiddle

Ok . So , go to the "ul" styling right at the top I.E.

                   ul {
			list-style-type:none;
			margin:0;
			padding:0;
			position: absolute;}

and take off position absolute , now run the fiddle and hover over Portfolio , SEE !!!!! How portfolio expands ??? Well can somebody tell me why ?

now Difficulty no 2 .

Go to the media Queries part right at the end and u'll see the same menu has been re-style as follows :

    @media screen and (max-width : 760px){
			/*Make dropdown links appear inline*/
			ul {
				position: static;
				display: none;
			}
                    }

now take off the "position:static" style and run the fiddle , now try minimizing the results section of the fiddle and and lastly click over "Show menu" , now u'll notice that the drop down menu is not aligned to the portion that says "Show menu" . Why ? whats sooo espical about "position:static" , that i have't Discovered ?? .

I know my code will take a while to go through , so i appreciate your time . this is an important question as a menu forms the basis of any website , sorry if my question seens silly . your time , and guidance is Highly appreciate .

Kind Regards .

Gautam.