title: CSS/HTML Menu going crazy
body: <p><img src="https://i.stack.imgur.com/Q9dR8.jpg" alt="enter image description here"></p>
  
  <p>Hello Mates, 
  I'm trying to build  a CSS menu that is displayed above. So far I wrote this HTML:</p>
  
  <pre><code>&lt;div class="left-menu"&gt;
  &lt;ul class="menu-left"&gt;
      &lt;li id="current" class="parent active item5"&gt;
          &lt;a href="/teliani/index.php?option=com_telianiwines&amp;amp;view=winesubcategory&amp;amp;Itemid=5"&gt;&lt;span&gt;ღვინო&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
              &lt;li class="parent item6"&gt;
                  &lt;a href="/teliani/index.php?option=com_telianiwines&amp;amp;view=winesubcategory&amp;amp;Itemid=6"&gt;&lt;span&gt;TELIANI VALLEY&lt;/span&gt;&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li class="item7"&gt;
                              &lt;a href="javascript:;"&gt;&lt;span&gt;ლეგენდა&lt;/span&gt;&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="item8"&gt;
                              &lt;a href="javascript:;"&gt;&lt;span&gt;ღვინოები&lt;/span&gt;&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="item9"&gt;
                              &lt;a href="javascript:;"&gt;&lt;span&gt;ჯილდოები&lt;/span&gt;&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my CSS:</p>
  
  <pre><code>/* 1 */
  .left-menu ul {
      width: 145px;
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  .left-menu ul li {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .left-menu ul li {
      width: 145px;
      margin: 0;
      padding: 0;
      height: 20px;
      background:#fff;
  }
  
  .left-menu ul li a {
      width:131px;
      height:20px;
      padding-left: 14px;
      float: left;
      font: normal 12px calibri, sylfaen, georgia, arial, verdana;
      color: #7b2029; text-decoration: none;
  }
  
  .left-menu ul li:hover, .left-menu ul li#current  {
      width: 145px;
      height: 20px;
      color:#fff;
      text-decoration: none;
  }
  
  .left-menu ul li#current a {
      width: 131px;
      height: 20px;
      padding-left: 14px;
      color: #fff;
      text-decoration: none;
      background: #7b2029;
      display:block;
  }
  
  /* 2 */
  .left-menu ul li ul  {
      width:145px;
      padding:0;
      margin: 2px 0 0 0;
      float: left;
      list-style: none;
  }
  
  .left-menu ul li ul li {
      width: 137px;
      margin: 0;
      padding: 0;
      height: 20px;
      list-style: none;
      padding-left: 8px;
  }
  
  .left-menu ul li ul li a {
      width: 120px;
      height: 20px;
      padding-top: 0px;
      font: normal 12px/20px calibri, sylfaen, georgia, arial, verdana;
      background:#887b33;
  }
  
  
  /* 3 */
  </code></pre>
  
  <p>and I'm getting displayed this crap:</p>
  
  <p><img src="https://i.stack.imgur.com/rwrH8.jpg" alt="enter image description here"></p>
  
  <p>Can someone tell me why? I haven't experience such thing before...</p>