title: Delay before drop-down menu disappears
body: <p>I've managed to create a drop-down menu using CSS and HTML. The drop-down menu will appear when mouse-hovered.</p>
  
  <p>I want the drop-down menu to disappear 1 second after the mouse is hovered out. For this, I've tried adding</p>
  
  <pre><code>transition: display 1s;
  </code></pre>
  
  <p>into <code>.dropdown:hover .dropdown_list, .dropdown_list:hover</code> but it doesn't do anything.</p>
  
  <p><strong>My Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
  }
  header {
      position: fixed;
      height: 35px;
      width: 100%;
      background: black;
  }
  .top-container {
      margin-top: 7px;
  }
  /* Code for drop-down list */
   .dropdown {
      margin-left: 100px;
      display: inline-block;
      color: #FFF;
  }
  .dropdown:hover {
      text-shadow:0px 4px 7px white;
  }
  .dropdown:hover .dropdown_list,
  .dropdown_list:hover {
      display: block;
      top:100%;
      
      transition: display 1s; /* Doesn't work */
  }
  .dropdown_list {
      list-style: none;
      display: none;
      position: absolute;
      color: red;
      width: 100px;
  }
  .dropdown_list li {
      background: yellow;
  }
  li {
      border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;header&gt;
          &lt;div class="top-container"&gt;
              &lt;div class="dropdown"&gt;Dropdown &amp;#10097;
                  &lt;ul class="dropdown_list"&gt;
                      &lt;li&gt;item 1&lt;/li&gt;
                      &lt;li&gt;item 2&lt;/li&gt;
                      &lt;li&gt;item 3&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I make a one second delay for the drop-down menu to disappear after hovering out? Is this possible without any jQuery or Javascript?</p>