title: Drop-right menu HTML and CSS
body: <p>I'm creating a drop-right menu with CSS, but I don't know how to do it... </p>
  
  <p>I have searched for some examples on internet, but the code of all of them are very extensive.</p>
  
  <p>I have tried with this one, but as you can see, I get a terrible and ugly result....</p>
  
  <p>How can I solve it? </p>
  
  <p>There is a link with an example of the result that I expect: 
  <a href="http://subefotos.com/ver/?fe969c98c2a25ac71c8c14d12a4c9a8co.png" rel="nofollow">http://subefotos.com/ver/?fe969c98c2a25ac71c8c14d12a4c9a8co.png</a></p>
  
  <p>Thanks!</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>body {
      background-color: #CEF6F5;
      text-decoration: none;
  }
  aside {
      margin-top: 1%;
      height: 50%;
  }
  #content {
      float: right;
      width: 80%;
      background-color: red;
  }
  #menu {
      width: 20%;
      float: left;
      background-color: black;
  }
  .menu {
      text-decoration: none;
      background-color: #000000;
      font-family: 'Rancho', cursive;
  }
  .cl-menu {
      list-style: none outside none;
      display: inline-table;
      position: relative;
      width: 80%;
  }
  .cl-menu li {
      padding: 5px 1px;
      text-align: center;
  }
  .cl-menu &gt; li:hover {
      background-color: #303030;
      background-color: #66819C;
      color: #FFF;
      font-weight: bold;
      text-decoration: none;
      opacity: 1;
  }
  .cl-menu li ul {
      display: none;
  }
  .cl-menu li:hover ul {
      display: block;
      opacity: 0.8;
      background-color: #FFF;
      margin-top: 4px;
      margin-left: 200px;
      font-weight: normal !important;
  }
  .cl-menu li ul li {
      border-bottom: 1px solid #cccccc !important;
      border-top: none !important;
      border-left: none !important;
      border-right: none !important;
  }
  .cl-menu li ul li a {
      color: #green;
  }
  .cl-menu li ul li a:hover {
      color: #5j8548;
  }
  .cl-menu ul:after {
      content: "";
      clear: both;
      display: block;
  }
  a {
      text-decoration: none;
      color: #CEF6F5;
      font-family: 'Rancho', cursive;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="stylesheet" href="css.css"&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  
      &lt;aside id='menu'&gt;
          &lt;ul class="cl-menu"&gt;
  
              &lt;li&gt; &lt;a href="#"&gt;Mis pedidos&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href="#"&gt;Mi perfil&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href="#"&gt;Descuentos&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id='albumes'&gt;Albumes
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Navidad 2015&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Navidad 2014&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a href="#"&gt;Añadir al carrito&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href="#"&gt;Articulos seleccionados&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href="#"&gt;Finalizar Pedido&lt;/a&gt; &lt;/li&gt;z
          &lt;/ul&gt;
      &lt;/aside&gt;
  
      &lt;aside id="content"&gt;CONTINGUT WEB&lt;/aside&gt;
  
  &lt;/body&gt;
      
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>