title: How to add space between menu and dropdown submenu
body: <p>I'm working on a CSS3 full width dropdown menu, but some details i can't get right. :-(</p>
  
  <p>What i try to achieve is this:</p>
  
  <p><a href="https://i.stack.imgur.com/Egk0P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Egk0P.png" alt=""></a></p>
  
  <p>You can see there is a little 20px space between the mainmenu and the submenu. In this example i used a top-margin:20px for the ul submenu. But that doesn't really work, because you will leave the hover-area with your cursor and the submenu wil dissapear. The dropdown only works if the ul-container of the submenu "touches" the hover-area.</p>
  
  <p>It did tried using the ul:before trick to add an empty block before the submenu ul, but somehow that doesn't work. :( It doens't take space like a block should do. It's just adding the content right over the ul element.</p>
  
  <p>What do i overlook or doing wrong here? :( Why is the ul ul:after not working? Is there a better way to add a little bit of empty "hoverspace" above the submenu? </p>
  
  <p>Your help would be very helpfull :-).</p>
  
  <p><strong>Live demo:</strong>
  <a href="http://jsfiddle.net/JeroenGerth/hDmxd/" rel="nofollow noreferrer">http://jsfiddle.net/JeroenGerth/hDmxd/</a></p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Tutorials &amp;gt;&lt;/a&gt;
              &lt;ul class="submenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Photoshop 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Dreamweaver 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Photoshop 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;InDesign 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Bridge 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lightroom 6&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;After Effects 7&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Premiere 8&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Motion 9&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Aperture 10&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;iPhoto 11&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Downloads &amp;gt;&lt;/a&gt;
          &lt;ul class="submenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Wallpapers 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;PSD files 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Video's 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Soundeffects 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Icons 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Maps 6&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About me&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>The CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>body {background-color: #E9E9E9;}
  
  nav ul { /*Main menu container*/
  margin: 0px;
  padding: 0px 20px; 
  background-color:#444;
  color: #fff; 
  list-style: none; 
  position:relative; 
  display:inline-table; 
  border-radius: 5px; 
  }
  
  nav ul:after {
      content: ""; clear: both; display: block;
  }
  
  nav ul li { /*Main menu-items*/ float:left;}
  
  nav ul li a {
      padding: 10px 20px; 
      color: #fff; 
      font-family: Calibri, Verdana, sans-serif; 
      text-decoration:none; 
      display: block; 
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      }
  
      nav ul li a:hover {color: #66D1D3;}
  
  nav ul ul { /*Submenu container*/
  display:block; 
  border-radius:0px; 
  padding: 0px; 
  position: absolute; 
  background-color:#fff;
  color: #000; 
  visibility:hidden;
  opacity:0;
  transition:all ease-in-out 0.4s;
  left: 0px;
  top: 100%;
  width: 100%;
  columns:100px 3;
  -webkit-columns:100px 3; /* Safari and Chrome */
  -moz-columns:100px 3; /* Firefox */
  }
  
          nav ul li:hover &gt; ul { /*Show submenu*/
                  visibility:visible;
                  opacity:1;
                  transition-delay:0s;
                  }
  
  nav ul ul:before { /*Why doesn't this work :( */
  content: "";
  display: block;
  height: 20px;
  position: absolute;
  width: 100%;}
  
  nav ul ul li { /*Submenu items*/
      float: none; 
      border-bottom: 1px #CCCCCC dotted; 
      position:relative; 
              }
  
      nav ul ul li a {
          color: #000; 
           -webkit-transition: all 1s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
          }
      nav ul ul li a:hover { 
          color: #66D1D3;
          background-color: #444;
          }
  </code></pre>