title: Show OUTSIDE div on a:hover
body: <p>I got this menu I've been working on, I want to make an outside div appear when I mouseover the a.</p>
  
  <p>I've searched through all stackoverlow but all those solutions can't seem to work for me. I must be doing something wrong. I would appreciate some help with this.</p>
  
  <p>my html</p>
  
  <pre><code>        &lt;div id="hover1"&gt;&lt;/div&gt;
          &lt;div style="float: left; position: relative; left: 50%; margin-top: 237px;"&gt;
              &lt;img src="img/octo_logo.png" class="logo" /&gt;
          &lt;/div&gt;
          &lt;!-- MENU start --&gt;
          &lt;div id="menu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="bio.html"&gt;&lt;span&gt;BIO&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="equipa.html"&gt;&lt;span&gt;EQUIPA&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="reconhecimento.html"&gt;&lt;span&gt;RECONHECIMENTO&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="parceiros.html"&gt;&lt;span&gt;PARCEIROS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="porque_nao.html"&gt;&lt;span&gt;PORQUE NÃO?&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contactos.html"&gt;&lt;span&gt;CONTACTOS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>my css:</p>
  
  <pre><code>#hover1{
      width: 155px;
      height: 650px;
      background-color: #57C194;
      float:left;
      position: absolute;
      display: none;
      }
  #menu a:hover + #hover1{
      display: block;
      }
  </code></pre>
  
  <p>Here's a view of the menu <a href="http://i.imgur.com/2qqjBpo.png" rel="nofollow">http://i.imgur.com/2qqjBpo.png</a></p>
  
  <p>And the result I want <a href="http://i.imgur.com/7DtXsDE.png" rel="nofollow">http://i.imgur.com/7DtXsDE.png</a></p>
  
  <p>EDIT: I'm willing to use jquery.</p>