title: How to use (top) margin with CSS3 drop down menu?
body: <p>I am trying to create a drop down menu completely in CSS3. For the most part I have accomplished what I wanted, but for some reason I can't seem to add <code>margin-top: 10px;</code> to drop down menu, as I don't want it touching the main link. It seems to deactivate the hover when it hits the margin?</p>
  
  <p>I have posted a working example with no margin on jsFiddle: <a href="http://jsfiddle.net/J5QSv/" rel="nofollow">http://jsfiddle.net/J5QSv/</a></p>
  
  <p>This is with the <code>margin-top: 10px;</code>, and does not work: <a href="http://jsfiddle.net/RastaLulz/J5QSv/2/" rel="nofollow">http://jsfiddle.net/RastaLulz/J5QSv/2/</a></p>
  
  <p>As you can see, that works perfectly fine. However, when you uncomment <code>margin-top: 10px;</code> it no longer works.</p>
  
  <p>Do you know a way to fix this? or a work around?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;span class="LinksMenu"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Account&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      padding: 10px;
      background: #F3F3F3;
  }
  
  a:link,a:visited { color:#000; text-decoration:none }
  a:hover,a:active { color:#000; text-decoration:underline }
  
  .LinksMenu {
      margin:0;
      padding:0;
      clear: both;
  }
  
  .LinksMenu ul {
      margin:0;
      padding:0;
  }
  
  .LinksMenu li {
      margin:0;
      padding:0;
      list-style:none;
      float: left;
      position: relative;
  }
  
  .LinksMenu ul ul li a {
      margin: 0;
      padding: 10px;
      width: 100px;
      display: block;
      text-shadow: 0;
      color: #000;
  }
  
  .LinksMenu ul ul {
      /* margin-top: 3px; */
      border: 1px solid #CCC;
      border-radius: 3px;
      background: #FFF;
      position: absolute;
      visibility: hidden;
  }
  
  .LinksMenu ul li:hover ul {
      visibility: visible;
  }
  </code></pre>