title: Can not align CSS Dropdown Menu
body: <p>As i told above, i can not align the dropdown menu to the right position. What i want is to drop down the items under their parent.</p>
  
  <p><img src="https://i.stack.imgur.com/9BuSa.jpg" alt="My Menu as Default"></p>
  
  <p>When i hover on "HOVERTHIS"
  <img src="https://i.stack.imgur.com/QknQ9.jpg" alt="On Hover state"></p>
  
  <p>I need to locate those sub-menus under their parent.</p>
  
  <p>Here is my HMTL:</p>
  
  <pre><code>&lt;div id="templatemo_menu"&gt;
      &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.php" class="current"&gt;Anasayfa&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="galeri.php"&gt;Galeri&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="duyurular.php?duyuru=1"&gt;23 Nisan&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="urunler.php"&gt;Ürünler&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="iletisim.php"&gt;İletişim&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="icerik.php?icerik=3"&gt;Okuyun&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="urunler.php" onclick="return false;"&gt;HOVERTHIS&lt;/a&gt;
                  &lt;ul class="alturun"&gt;
                      &lt;li&gt;&lt;a href="urunler.php?kat=2"&gt;Test Kategori 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="urunler.php?kat=3"&gt;Hizmet Ürünleri&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="urunler.php?kat=15"&gt;POWDERS&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;       
      &lt;div class="cleaner"&gt;&lt;/div&gt;
  &lt;/div&gt; &lt;!-- end of templatemo_menu --&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>/* menu */
  #templatemo_menu {
      clear: both;
      width: 900px;
      height: 40px;
      padding: 0 30px;
      background:url(images/templatemo_menu.png)
  }
  
  #templatemo_menu ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  #templatemo_menu ul li {
      padding: 0px;
      margin: 0px;
      display: inline;
  }
  
  #templatemo_menu ul li a {
      float: left;
      display: block;
      width: 100px;
      height: 28px;
      padding: 9px 0 0;
      margin: 0 1px 0 0;
      font-size: 14px;
      text-align: center;
      text-decoration: none;
      color: #383838; 
      font-weight: 500;
      letter-spacing: 1px;
      outline: none;
      border: none;
  }
  
  #templatemo_menu ul li a:hover, #templatemo_menu ul li .current { color: #000; height: 31px; padding: 6px 0 0; background: url(images/templatemo_menu_hover.png) bottom center no-repeat }
  
  .alturun {
  
  
  }
  
  #templatemo_menu ul li:hover ul {
  
      display: block;
  }
  #templatemo_menu ul li ul{
      width: 100px;
      display: none;
  }
  
  /* end of menu */
  </code></pre>
  
  <p>Thanks in advance!</p>
  
  <p><strong>Edit by Sam</strong></p>
  
  <p>Included jsfiddle based on OP's code -> <a href="http://jsfiddle.net/uWcLM/" rel="nofollow noreferrer">http://jsfiddle.net/uWcLM/</a></p>