Hi there everyone
Sorry if this is a frequently asked question (tried looking for it but couldn't find it!) I'm having trouble adding a margin onto the top and left of my drop down menu, I want it to be parallel with the section article (20px to the left and maybe about 10px down from the top), but it doesn't seem to want to get out of the top left corner! Any ideas?

CSS
Code:
* {
	margin: 0 0;
	padding: 0 0;
	font-family: "Helvetica Neue";
	text-decoration: none;
	color: #FFF;
}
body
{
	background: #000;
}
article, setion
{
	display: block;
}
section
{
	background: #000;
	border: 1px solid #FFF;
	border-width: 1.5px 1.5px 1.5px 1.5px;
	padding: 10px;
	width: 505px;
	position: absolute;
	z-index: 100;
	top: 137px;
	opacity: 0.7;
	left: 20px;
}
	section article p
	{
		font-size: 12px;
		line-height: 20px;
		margin-bottom: 10px;
	}
video
{
	position: absolute;
	width: 105%;
	height: 105%;
	margin: 0 0;
	z-index: -10;
	left: 0px;
	top: 0px;
}
nav
{
	position: relative;
	width: 505px;
	margin: 10px;
	margin-left: 20px;
	margin-top: 10px;
	z-index: 100;
	display: block;
	background: #000;
	height: 34px;
	border: 1px solid #777;
	border-width: 1.5px 1.5px 1.5px 1.5px;
	left: 20px;
	top: 0px;
}
	nav ul
	{
		list-style: none;
	}
		nav ul li
		{
			float: left;
			margin: 10px 24px;
			margin-left: 20px;
		}
			nav ul li a
			{
				display: block;
				margin-top: 6px;
				font-size: 9px;
				padding: 3px 10px 4px 10px;
				color: #000;
				text-direction: none;
				margin: 10px;
				margin-left: 20px;
			}
			nav ul li a:hover
			{
				background: #000
				color: #000;
			}
HTML5
Code:
<!DOCTYPE HTML>
<html lang="en">

	<video preload loop autoplay="true"; z-index: -1;>
        <source src="stom train_2.mp4" type="video/mp4" >
        <source src="stom train_2.ogv" type="video/ogg" >
    The video doesn't appear to work on your browser!
    </video>
    
<head>
    <title>STOM VIDEO</title>
    <link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/css; charset=utf-8" />
<style type="text/css">
.nav ul {list-style:none; margin:0; padding:0; background-color:#000; opacity: 0.7;}
.nav li {float:left; width:100px; background-color:#000; text-align: center;
		border-right:1px solid white; position: relative;
		height:30px; line-height:30px;}
.nav li ul li {float:none; width:150px; text-align: left; padding-left:6px;
		border-top:1px; }
.nav a {text-decoration:none; color:white; font-size:12px;}
.nav li ul {position:absolute; top:30px; left:0; visibility:hidden;}
.nav li:hover ul {visibility: visible; z-index: 100;}

.nav li:hover {background-color:#000;}

.content {clear:both;}
</style>
</head>

<body>
<div class="nav">
 <ul>
 
  <li>
    <div align="center"><a href="index.html">HOME</a>
    </div>
  </li>

  <li>
    <div align="center"><a href="portfolio.html">PORTFOLIO</a>
      <ul>
        <li><a href="art.html">ART/MUSIC</a></li>
        <li><a href="nightlife.html">NIGHTLIFE/CLUBS</a></li>
        <li><a href="products.html">PRODUCTS/EVENTS</a></li>
      </ul>
      
    </div>
  <li>
    <div align="center"><a href="contact.html">CONTACT</a>
    </div>
  </li>
 </ul>
</div>
<section>
  <article>
   	<h2><img src="stom logo2.png" width="404" height="75"></h2>
      <p>Video is a compelling and innovative method of telling people what you do or about your business in visually stimulating way. Whether it be creative and experimental or informative and educational, we pride ourselves in producing something that says what you need it to say using a range of pioneering techniques.      </p>
      <p>To find out more about what we do take a look through our portfolio <em>(contains flashing images)</em> and feel free to contact us for a quote, if you are interested in our services.</p>
  </article>
    </section>
    


</body>
</html>