title: Dropdown not displayed after hovering over an item
body: <p>I learn front-end since few weeks but I cannot really figure out why my dropdown menu does not work.
  My main menu looks like this:</p>
  
  <pre><code>&lt;div id="main-container"&gt;
  
      &lt;!-- Main navigation --&gt;
      &lt;header class="main-header"&gt;
          &lt;div class="header-content"&gt;
              &lt;div class="container"&gt;
  
                  &lt;!-- Logo --&gt;
                  &lt;div class="logo-wrapper pull-left"&gt;
                      &lt;a href="index.html"&gt;Sit &lt;span&gt;On&lt;/span&gt; Chair&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Main menu --&gt;
                  &lt;nav class="nav-main pull-right"&gt;
                      &lt;ul class="main-nav-list"&gt;
                          &lt;li&gt;&lt;a href="#" class="dropdown”&gt;About us&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#”&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#”&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="dropdown-content"&gt;
                          &lt;a href="#”&gt;News&lt;/a&gt;
                          &lt;a href="#”&gt;Our team&lt;/a&gt;
                          &lt;a href="#”&gt;History&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css file looks like this:</p>
  
  <pre><code>/* Text styles */
  body {
      font-family: 'ralewayregular';
  }
  
  @font-face {
      font-family: 'ralewayregular';
      src: url('../fonts/raleway-regular.eot');
      src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/raleway-regular.woff2') format('woff2'),
      url('../fonts/raleway-regular.woff') format('woff'),
      url('../fonts/raleway-regular.ttf') format('truetype'),
      url('../fonts/raleway-regular.svg#ralewayregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  h1, h2 {
      text-transform: uppercase;
  }
  
  a {
      text-decoration: none;
  }
  
  /* Main content */
  #main-content {
      position: relative;
      z-index: 0;
  }
  
  /* Container styles */
  * {
      box-sizing: border-box;
  }
  
  .container {
      position: relative;
      width: 1180px;
      margin: 0 auto;
  }
  
  .pull-left {
      float: left;
  }
  
  .pull-right {
      float: right;
  }
  
  /* Main header */
  .main-header {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 99;
      text-transform: uppercase;
      background-color: #000000;
  }
  
  /* Logo */
  .logo-wrapper {
      margin: 16px 0;
  }
  
  /* General header styles */
  .header-content .main-nav-list li {
      display: inline;
      padding: 0 30px;
      &amp;:nth-child(3) {
          padding-left: 30px;
          padding-right: 0;
      }
  }
  
  .header-content {
      span {
          color: #66dfc9;
          transition: 0.2s ease-in-out;
      }
      a {
          color: #ffffff;
          transition: 0.2s ease-in-out;
          &amp;:hover {
              color: #66dfc9;
              transition: 0.2s ease-in-out;
              span {
                  color: #ffffff;
                  transition: 0.2s ease-in-out;
              }
          }
      }
  }
  
  /* Dropdown */
  .dropdown-content {
      position: absolute;
      top: 60px;
      right: 230px;
      width: 140px;
      padding: 10px;
      display: none;
      overflow: auto;
      z-index: 100;
      border-radius: 5px;
      text-transform: none;
      text-align: left;
      background-color: #000000;
      a {
          display: block;
          padding: 10px;
          text-align: center;
          transition: 0.2s ease-in-out;
          &amp;:hover {
              color: #66dfc9;
              transition: 0.2s ease-in-out;
          }
      }
  }
  
  .dropdown:hover .dropdown-content {
      display: block;
  }
  </code></pre>
  
  <p>I would like to display .dropdown-content when hovering over 'About us’ link.
  Is it possible to display div element if it is outside of an unordered list?
  Everything works fine except the last part of my code.</p>
  
  <p>I have tried to change my unordered list for div element, display div element inside link About us, but it also does not work.</p>