title: Issues aligning links that appear on hover
body: <p>I am trying to design a tumblr theme. I've set up a div with four buttons at the bottom of each post. One of these buttons is a share button. You hover over the share button and a div appears with links (you click and a new window opens and the post gets shared where ever you selected it to be shared).</p>
  
  <p>In the example below: when I roll over the icon with the mouse, it comes up aligned to the left. </p>
  
  <p>IMAGE HERE: <a href="https://drive.google.com/file/d/0B1O3Ee_1Z5cRTDdaSTBQNW5mM0U/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/0B1O3Ee_1Z5cRTDdaSTBQNW5mM0U/view?usp=sharing</a></p>
  
  <p>Also, when I resize the page, the menu ends up being in a totally different position.</p>
  
  <p>I would like for the menu to appear as it appears in this image. I want the menu to appear directly beneath the div of buttons. I would like this menu to remain in the same position when in the page is resized or is a mobile viewport size. (This is a mock up I made with a photo editor) I've tried various adjustments in my code, etc with no avail. </p>
  
  <p>IMAGE HERE: <a href="https://drive.google.com/file/d/0B1O3Ee_1Z5cRX3hPd2ZGekJhU0U/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/0B1O3Ee_1Z5cRX3hPd2ZGekJhU0U/view?usp=sharing</a></p>
  
  <p>Here is my code:</p>
  
  <p>CSS:</p>
  
  <pre><code>.showme{ 
      display: none;
      width:100px;
      height:120px;
      text-align:right;
      margin-top:30px;
      z-index:5;
      position:absolute;
      float:right;  
  }
  .showhim:hover .showme{
      display : block;
      z-index:5;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="showhim"&gt; 
      &lt;li style="float:right; margin-left:5px; list-style-type:none; line-height:0px; padding-top:1px;"&gt;
          &lt;i class="fa fa-share-square fa-lg"&gt;&lt;/i&gt;
      &lt;/li&gt;
      &lt;div class="showme"&gt;
          &lt;a href="https://twitter.com/intent/tweet?url={Permalink}" target="_blank"&gt;Twitter&lt;/a&gt;&lt;br/&gt;
          &lt;a href="https://www.facebook.com/sharer/sharer.php?u={Permalink}" target="_blank"&gt;Facebook&lt;/a&gt;&lt;br/&gt;
          &lt;a href="http://plus.google.com/share?url={Permalink}" target="_blank"&gt;Google Plus&lt;/a&gt;&lt;br/&gt;
          &lt;a href="https://www.pinterest.com/pin/create/bookmarklet/" target="_blank"&gt;Pinterest&lt;/a&gt;&lt;br/&gt;
          &lt;a href="mailto:?subject=&amp;body={Permalink}" target="_blank"&gt;Email&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I am open to any method to try and get this to work. I also have no problems with making this an onClick event rather than a hover event. My guess is that an onClick event would be smarter for mobile users (I'd love some input on this).</p>
  
  <p>Any help is greatly appreciated.</p>