title: fixing submenu to top of nav
body: <p>I have created a dropdown navigation with two sub-menu's. </p>
  
  <p>I am trying to get the second sub-menu to start from the top (just underneath the primary nav/black bar) and not at it's current position but I am not sure how to do this. </p>
  
  <p>Here is a codepen I made <a href="http://codepen.io/anon/pen/ByaaYM" rel="nofollow">http://codepen.io/anon/pen/ByaaYM</a> </p>
  
  <p>So for example, if you hover over Personal > Caravan or Personal > Home &amp; Property, the top of the sub menu should sit in the same place, just underneath the black bar.</p>
  
  <p>Any help would be greatly appreciated</p>
  
  <p>This is the outcome I would like to achieve <a href="http://codepen.io/anon/pen/OPJPNL" rel="nofollow">http://codepen.io/anon/pen/OPJPNL</a> - Notice when hovered, the sub-menu's sit flush directly underneath the black bar.</p>
  
  <p>The code...</p>
  
  <p>Html</p>
  
  <pre><code>    &lt;ul&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Personal&lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
        &lt;li data-submenu-id="submenu-patas"&gt;
          &lt;a href="#"&gt;Boat&lt;/a&gt;
        &lt;/li&gt;
        &lt;li data-submenu-id="submenu-snub-nosed1"&gt;
          &lt;a href="#"&gt;Caravan&lt;/a&gt;
          &lt;ul id="submenu-snub-nosed1"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Motor Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Touring Caravan&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Static Leisure&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Trailer Tent&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li data-submenu-id="submenu-snub-nosed"&gt;
          &lt;a href="#"&gt;Home &amp; Property&lt;/a&gt;
           &lt;ul id="submenu-snub-nosed"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Beach Hut&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Buy To Let&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Foster Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;High Net Worth&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Military&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Motor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;More&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Business&lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
        &lt;li data-submenu-id="submenu-snub-nosed4"&gt;
          &lt;a href="#"&gt;Care &amp; Medical&lt;/a&gt;
          &lt;ul id="submenu-snub-nosed4"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Motor Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Touring Caravan&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Static Leisure&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Trailer Tent&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Financial&lt;/a&gt;
        &lt;/li&gt;
        &lt;li data-submenu-id="submenu-snub-nosed3"&gt;
          &lt;a href="#"&gt;Liability&lt;/a&gt;
           &lt;ul id="submenu-snub-nosed3"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Beach Hut&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Buy To Let&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Foster Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;High Net Worth&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Property&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Trade Specific&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Infozone&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>      * {
      box-sizing:border-box;
    }
  
    body {
      font-family: sans-serif;
    }
  
  
    ul ul {
      display: none;
    }
  
    ul li:hover &gt; ul {
      display: block;
    }
  
    ul {
      background: #333; 
      padding: 0 10px; 
      list-style: none;
      position: relative;
      display: inline-block;
    }
      ul:after {
        content: ""; clear: both; display: block;
      }
  
    ul li {
      float: left;
    }
      ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
      }
      ul li:hover a {
          color: #fff;
        }
  
    ul li a {
        display: block; 
        padding: 25px 40px;
        color: #fff; 
        text-decoration: none;
      }
  
    ul ul {
      background: #5f6975; border-radius: 0px; padding: 0;
      position: absolute; top: 100%;
    }
    ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
      }
    ul ul li a {
          padding: 20px;
          color: #fff;
  
        } 
        ul ul li a:hover {
            background: #4b545f;
          }
  
    ul ul ul {
      position: absolute; left: 100%; top:-100%;
      width: 230px;
      padding: 10px;
  
    }
    ul ul ul li {
      display: inline-block;
      width: 49%;
    }
  
    .dropdown-menu &gt; li {
      width: 200px;
    }
  </code></pre>