title: Show another element with hover
body: <p>I have this html code </p>
  
  <pre><code>  &lt;div class="dropdown"&gt;
          &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#" name="link_defineProcurement"&gt;
            &lt;i class="fa fa-inbox icon-menu"&gt;&lt;/i&gt;
                              1. Tab
                     &lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;sub-step1&lt;/li&gt;
            &lt;/ul&gt;
      &lt;/div&gt;    
  </code></pre>
  
  <p>This is a Tab bar, and when I click on dropdown a menu is open (dropdown-menu) with subteps to pick up.</p>
  
  <p>So far I achieve with hover than when a put the mouse over the dropdown the color change.
  But what I would like is that when I hover the dropdown the dropdown-menu will show without have to click.</p>
  
  <p>Here my CSS:</p>
  
  <pre><code> .dropdown:hover {
      background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  }
  
  .dropdown-menu {
      width: 211px;
      border-color: #efefef;
      border-width: 3px;
      background-clip: padding-box;
      background-color: #ffffff;
      border-radius: 0 0 7px 7px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
      display: none;
      float: left;
      font-size: 12px;
      left: 0;
      list-style: outside none none;
      margin: 0px 0 0;
      min-width: 160px;
      padding: 5px 0;
      position: absolute;
      top: 100%;
      z-index: 1000;
  }
  </code></pre>
  
  <p>What I read/try without success was to do this in the hover.</p>
  
  <pre><code> .dropdown:hover + .dropdown-menu {
      background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  }
  </code></pre>
  
  <p>Can someone point me in the right direction please?</p>
  
  <p>And another question. Once that I make the hover works. With this CSS code how can I do to open the dropdown-menu with an animation, let's say from top to bottom. </p>