title: Dropdown menu moves content
body: <p>My problem is quite simple but i don't know what i've done bad..</p>
  
  <p>Dropdown menu on my site moves content.I've tried a z-index with absolute and relative position but it did not worked.Maybe i've screwed something up but right now i don't know what</p>
  
  <p>Thanks for help and Greets</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: 'Segoe UI', sans-serif;
  }
  #logo {
    margin-top: 15px;
    margin-left: 10px;
    float: left;
    font-size: 30px;
    color: white;
  }
  .menu&gt;ul {
    list-style-type: none;
    width: 100%;
    background-color: #333;
    min-height: 130px;
  }
  #fest {
    margin-left: 280px;
  }
  #pierwszy {
    clear: both;
  }
  .element {
    width: 120px;
    height: auto;
    display: inline-block;
    padding: 10px;
    color: white;
    text-align: center;
    font-size: 20px;
  }
  .menu&gt;ul&gt;li {
    float: left;
    margin-left: 30px;
    margin-top: 30px;
  }
  .element:hover {
    background-color: #555;
    cursor: pointer;
  }
  .menu&gt;#logo&gt;p {
    font-size: 40px;
    color: white;
  }
  a {
    text-decoration: none;
    color: white;
  }
  .menu&gt;ul&gt;li&gt;ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: none;
  }
  .menu&gt;ul&gt;li:hover&gt;ul {
    display: block;
  }
  .menu&gt;ul&gt;li:hover&gt;ul:hover&gt;li:hover {
    display: block;
    background-color: #666;
  }
  .menu&gt;ul&gt;li&gt;ul&gt;li {
    margin: 10px;
  }
  .jumbotron {
    background-color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="pl"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;
      LOREN IPSUM DZIADU !
    &lt;/title&gt;
    &lt;meta name="description" content="nananananana moje testy i zabawy" /&gt;
    &lt;meta name="keywords" content="moje,nowe,zabawy,strony,html" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
    &lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
  &lt;/head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div id="topbar"&gt;
  
      &lt;div id="logo"&gt;
        &lt;a href="index.html"&gt;
          &lt;img src="developer.png" width=220px height=90px;&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;nav class="menu"&gt;
        &lt;!--&lt;img src="pan.jpg" alt=" "!--&gt;
        &lt;ul&gt;
          &lt;li class="element"&gt;&lt;a href="#"&gt;Something&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;Something&lt;/li&gt;
              &lt;li&gt;Something&lt;/li&gt;
              &lt;li&gt;Something&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
  
          &lt;li class="element"&gt;&lt;a href="#"&gt;Something&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;Something&lt;/li&gt;
              &lt;li&gt;Something&lt;/li&gt;
              &lt;li&gt;Something&lt;/li&gt;
  
            &lt;/ul&gt;
            &lt;li class="element"&gt;Something&lt;/li&gt;
            &lt;li class="element"&gt;Something&lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;/nav&gt;
      &lt;br/&gt;
      &lt;br/&gt;
  
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;article&gt;
      &lt;img id="fest" src="fest.jpg" width=320px height=350px;&gt;
      &lt;/a&gt;
      &lt;p&gt;Proin vel luctus urna, a suscipit lectus. Quisque aliquam sollicitudin feugiat. In et venenatis nisl, at mattis arcu. Quisque dictum posuere dui eu luctus. Quisque dignissim ipsum orci, sed malesuada nibh posuere quis. Vestibulum venenatis hendrerit
        enim a scelerisque. Integer fringilla diam et mauris viverra, eget ornare eros faucibus. Phasellus id ex vitae lacus porta pulvinar.&lt;/p&gt;
    &lt;/article&gt;
    &lt;article&gt;
      &lt;p&gt;Mauris urna sapien, molestie quis vulputate et, interdum vitae massa. Suspendisse dolor velit, imperdiet eu bibendum vitae, finibus quis lorem. Morbi ultricies lorem quis dui hendrerit luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Duis scelerisque varius leo. Quisque malesuada tortor id risus posuere, sodales rutrum nunc tristique. Vivamus pulvinar id leo ut fringilla.&lt;/p&gt;
    &lt;/article&gt;
    &lt;!-- Latest compiled and minified JavaScript --&gt;
    &lt;script&gt;
      src = "js/bootstrap.min.js"
    &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>