title: Expand link div and add links within it
body: <p>What I'm trying to do is, I have a div box with a link (link 1). It an "a href" inside a div with no title so you can click on the whole div. What I want is for this to behave the way it does but also expand and reveal two more links when you hover over it (link 2 and 3) and hide when you mouseout.</p>
  
  <p><a href="http://i.stack.imgur.com/83rV2.png" rel="nofollow">http://i.stack.imgur.com/83rV2.png</a></p>
  
  <p>The closest I've gotten is this bit of code.</p>
  
  <p>Java:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function showhide(id, visibility) {
  document.getElementById(id).style.display = visibility;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;div id="button"&gt; &lt;a href='/page' onMouseOver="showhide('divContent','inline');"
  onMouseOut="showhide('divContent','none');"
  onfocus="showhide('divContent','inline')";
  onBlur="showhide('divContent','none')";&gt;&lt;/a&gt; &lt;div id="divContent"&gt;Link&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Problem with this is, the divContent div disappears when I go to it because I'm not in the button div anymore.</p>
  
  <p>Can anyone help?</p>
  
  <p><em>EDIT</em></p>
  
  <p>Thank you Moin Zaman, you answer covers about 90% of what I was looking for. One partular thing I need out of this is I need the entire original div to be clickable, aside from the area where link1 and link2 appear. The reason for this is, link 1 is a fixed size div box with a background image and no text. The hover state changes the background to a hover version of that image.</p>