title: Dropdown menu position of the submenu
body: <p>I tryed to create a simple dropdown menu, but i dont get it...
  I looked at some tutorials now and the position of the submenu is crap. I want a "normal" dropdown menu nothing special. The problem is maybe the position absolute, but in the tutorial he used it too. The Dropdown menu is at the secound point (Produkte). Here is my Page: <a href="http://skeptar.bplaced.net/Ukena" rel="nofollow">Page</a> and the Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      padding: 0px;
      margin: 0px;
      font-family: Raleway;
      line-height: 20px;
   color: #003399;
  }
  
  body{
      background-image: url(images/hintergrund.png);
  }
  
  section{
      margin-top: 50px;
      width: 1100px;
      background: white;
      border: 2px solid black;
   box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
      
      margin-left: auto;
      margin-right: auto;
      padding: 20px;
      background-color: #fcb774;
  }
  
  article{
      width: 100%;
  }
  
  article:after{
     content: '';
     display: block;
     clear: both;
  }
  
  .bild{
      height: 200px;
      width: 200px;
      float: left;
      border: 2px solid black;
   box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
      overflow: hidden;
  }
  
  .bild:hover{
      cursor:pointer;
  }
  
  .text{
      float: right;
      width: 860px;
      word-wrap: break-word;
      height: 200px;
      border: 2px solid black;
   box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
      background-color: white;
  }
  
  hr{
      margin-top: 50px;
      margin-bottom: 50px;
      border: 1px solid black;
  }
  
  nav{
      width: 100%;
  }
  
  nav ul{
      background-color: #fcb774;
      margin: 0px;
      padding: 0px;
      text-align: center;
   font-size: 0;
   border-bottom: 2px solid black;
   box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
  }
  
  nav ul li{
      display: inline-block;
   font-size: 16px;
  }
  
  nav ul li a{
      display: block;
      padding: 10px 20px 10px 20px;
      transition: all 0.5s;
      text-decoration: none;
  }
  
  nav ul li a:hover{
      background-color: white;
      text-decoration: underline;
  }
  
  .dropdown{
      display:none;
      position: absolute;
      top: 30px;
      left: 0;
      width: 100px;
  }
  
  nav ul li:hover .dropdown{
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Homepage&lt;/title&gt;
          &lt;link rel="stylesheet" href="index.css"&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'&gt;
          
          
          &lt;!-- include jQuery library --&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
          &lt;!-- include Cycle plugin --&gt;
          &lt;script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
                  $('.slide1').cycle({
                      fx: 'fade',
                      next: '.slide1',
                      timeout: 0
                  });
              })
    
     $(document).ready(function() {
                  $('.slide2').cycle({
                      fx: 'fade',
                      next: '.slide2',
                      timeout: 0
                  });
              });
              
              $(document).ready(function() {
                  $('.slide3').cycle({
                      fx: 'fade',
                      next: '.slide3',
                      timeout: 0
                  });
              });
          &lt;/script&gt;            
      &lt;/head&gt;
      &lt;body&gt;
          
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Startseite&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Produkte&lt;/a&gt;
                      &lt;ul class="dropdown"&gt;
                          &lt;li&gt;&lt;a&gt;T-Shirts&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a&gt;Ansteckbuttons&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a&gt;SexToys&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          
          &lt;section&gt;
              &lt;article&gt;
                  &lt;div class="bild slide1"&gt;
       &lt;img src="images/tshirt1.png" width="200" height="200" /&gt;
       &lt;img src="images/tshirt2.png" width="200" height="200" /&gt;
                  &lt;/div&gt;
                  &lt;div class="text"&gt;
       &lt;h1&gt;T-Shirts&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/article&gt;
              
              &lt;hr&gt;
              
              &lt;article&gt;
                  &lt;div class="bild slide2"&gt;
       &lt;img src="images/tshirt3.png" width="200" height="200" /&gt;
       &lt;img src="images/tshirt4.png" width="200" height="200" /&gt;
                  &lt;/div&gt;
                  &lt;div class="text"&gt;
       &lt;h1&gt;T-Shirts&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/article&gt;
              
              &lt;hr&gt;
              
              &lt;article&gt;
                  &lt;div class="bild slide3"&gt;
       &lt;img src="images/tshirt3.png" width="200" height="200" /&gt;
       &lt;img src="images/tshirt4.png" width="200" height="200" /&gt;
                  &lt;/div&gt;
                  &lt;div class="text"&gt;
       &lt;h1&gt;T-Shirts&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/article&gt;
              
          &lt;/section&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>