title: Hover over span to show drop down list
body: <p>I'm trying to show a drop down list when mouse hovers over a text.. Currently my html is as follows:</p>
  
  <pre><code>&lt;div class="col-sm-12"&gt;
      &lt;span style="font-size:26px"&gt;nature : &lt;strong class="link"&gt;DROPDOWN&lt;/strong&gt;
          &lt;ul class="dlist"&gt;
              &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;b&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;C&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;D&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;E&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;F&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently my CSS looks like this:</p>
  
  <pre><code>.link:hover{
        color:green;
   }
  </code></pre>
  
  <p>I'm kind of stuck on what step to take after this to show the dropdown list.</p>