title: Change padding on hover in CSS
body: <p>Ok guys, noob here, writing my first joomla module (or trying to anyway!). Gotten suprisingly far but am having some issues with my css styling, im sure its to do with my selectors and my lack of understanding about whats happening!</p>
  
  <p>Basically Im trying to make one of the li's padding-right grow on hover, the effect is working but currently both the li's are growing rather than just the one I am hovering on.</p>
  
  <p>Any help would be awesome!</p>
  
  <p>THE HTML</p>
  
  <pre><code>&lt;div&gt;
  &lt;ul id="social"&gt;
  &lt;li&gt;one&lt;/li&gt;
  &lt;li&gt;two&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>THE CSS</p>
  
  <pre><code>#social{
      position:fixed;
      z-index:1000;
      top:50%;
      right:0px;
      list-style:none;
          }
  
  #social li{
      padding-right: 5px;
      padding-top:5px;
      padding-bottom:5px;
      padding-left:5px;
      background-color: #202020;
      border-radius: 4px 0 0 4px;
      margin-top:15px;
      -moz-transition: padding-right .3s ease-in;
       -o-transition: padding-right  .3s ease-in;
       -webkit-transition: padding-right  .3s ease-in;
       transition: padding-right  .3s ease-in;
      }
  
  #social li:hover{
      padding-right: 25px;
      padding-top:5px;
      padding-bottom:5px;
      padding-left:5px;
      }
  </code></pre>