Mouse hover is happening around the element not just on the element
<p>When I place the mouse anywhere near to the right side of the element , mouse hover is displaying the list.I wanted it to be displayed only when the cursor is placed on the element. Please let me know how can i do that.</p>

<pre><code>&lt;div class="dropdown"&gt;
      &lt;a href="#" class="btn btn-success btn-lg"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; User&lt;/a&gt;
       &lt;div class="dropdown-content"&gt;
      &lt;span class="glyphicons glyphicons-user"&gt;&lt;/span&gt;
      &lt;a href="#"&gt;My Account&lt;/a&gt;
      &lt;a href="#"&gt;Logout&lt;/a&gt;
     &lt;/div&gt;
     &lt;input type="button" value="Post Your Ad!" Style="color:Red; padding:5px;"&gt;&lt;/input&gt;
       &lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/Rahul_16/MMHVv/24/" rel="nofollow">http://jsfiddle.net/Rahul_16/MMHVv/24/</a></p>