title: How do I get a HTML drop down to start lower
body: <p>The website I've been working on I've been very picking with everything, because I want this to be a very cleaned and good website for my first professional job. The only item that has been annoying me is that my navbar has hover-drop-down and it overlaps with the company's logo. I wanted to know if there was a way in CSS to get the dropdown to begin about 12px lower?</p>
  
  <pre><code>&lt;div class="col-md-11 col-sm-12  text-left-xs text-left-sm "&gt;
                          &lt;div class="bar__module" &gt;
                              &lt;ul class="menu-horizontal "&gt;
                                  &lt;li class="dropdown dropdown--hover "&gt;&lt;a href="/motors/shop.aspx"&gt;Shop&lt;/a&gt;&lt;span class="dropdown__trigger"&gt;&lt;/span&gt;
                                      &lt;div class="dropdown__container"&gt;
                                          &lt;div class="container"&gt;
                                              &lt;div class="row"&gt;
                                                  &lt;div class="dropdown__content col-md-12 text-left" style="background: linear-gradient(#E9E9E9, #ffffff);"&gt;
                                                      &lt;div class="col-md-3 hidden-xs "&gt;
                                                          &lt;img alt="" src="../photosvideos/sidewindernewpics/Sw shield side copy.png" style="margin-bottom: -18px;" /&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="col-md-3 text-left"&gt;
                                                          &lt;h5&gt;Products&lt;/h5&gt;
                                                          &lt;ul class="menu-vertical"&gt;
                                                              &lt;li&gt;&lt;a href="/motors"&gt;About The Sidewinder&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li&gt;&lt;a href="/motors/shop.aspx"&gt;Shop&lt;/a&gt;&lt;/li&gt;
                                                          &lt;/ul&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/li&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/F3vHC.png" rel="nofollow noreferrer">Example of what is happening</a></p>
  
  <p><a href="https://i.stack.imgur.com/0qVLq.png" rel="nofollow noreferrer">I want that edge to be lower so that it doesn't touch the logo</a></p>