title: how to overlap a list of menus over an image
body: <p>When the menu "product" is clicked or mouse over, the another list of menus appear.. but the image block which is below the menu bar, moves away from the position. if i use css [ position:absolute;], then the image box remains static and the product's sub-menu overlaps the image block, which is what i wanted. but the image blocks width &amp; height settings change drastically, thereby spoiling the alignment.
   pls chk the codings in <a href="http://jsfiddle.net/C2YXp/" rel="nofollow">jsFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.home_menu {
    border: 1px solid black;
    width: 98%;
    height: 3.3%;
    margin-right: auto;
    margin-left: auto;
  }
  div#menuDemo {
    clear: both;
    //border:1px solid black;
    height: 78%;
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
    background-color: #A55927;
    /*Remove this next one in production - Used for demo purpose only*/
    margin-bottom: 0.1%;
    padding-top: 0.7%;
    z-index: 4;
  }
  div#menuDemo ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #A55927;
  }
  div#menuDemo &gt; ul &gt; li {
    float: left;
    text-align: center;
  }
  div#menuDemo ul li {
    width: 25%;
    //border: 5px solid purple;
  
  }
  div#menuDemo ul li a {
    text-decoration: none;
    font-weight: bolder;
    text-align: center;
  }
  div#menuDemo &gt; ul &gt; li &gt; ul {
    display: none;
    text-align: center;
  }
  div#menuDemo &gt; ul &gt; li:hover &gt; ul {
    display: block;
    text-align: center;
  }
  .sub1 {
    width: 100%;
    //border:1px solid green;
  
  }
  .colouring {
    color: black;
    font-weight: bolder;
  }
  .colour {
    //border:1px solid blue;
    color: black;
    text-align: center;
    //width:100%;
  
  }
  .wrapper {
    border: 5px solid pink;
    width: 98.8%;
    height: 82%;
    margin-top: 1%;
    z-index: 2;
  }
  .uniform_block {
    border: 5px solid green;
    width: 100%;
    height: 40%;
    cursor: pointer;
  }
  .uniform_block img {
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="home_menu"&gt;
      &lt;div id="menuDemo"&gt;
        &lt;ul&gt;
          &lt;li id="homeMenu"&gt;&lt;a href="#menuHome" class="colour"&gt;About Us&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;!--  &lt;li &gt;&lt;a href="#menuHome" class="colour"&gt;About Us&lt;/a&gt;&lt;/li&gt; --&gt;
  
          &lt;li&gt;&lt;a href="#" class="colour" id="expand"&gt;Products&lt;/a&gt;
            &lt;ul class="sub1"&gt;
              &lt;li&gt; &lt;a href="#" class="colouring"&gt; Uniforms &lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; &amp;nbsp;&amp;nbsp &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; Automobile&amp;nbsp;Industry&amp;nbsp;Uniforms &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; Pharmaceutical&amp;nbsp;Uniforms &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; Food&amp;nbsp;Industry&amp;nbsp;Uniforms &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; Government&amp;nbsp;Sector&amp;nbsp;Uniforms &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; School/College&amp;nbsp;Uniforms &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; &amp;nbsp;&amp;nbsp &lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="colouring"&gt;Shoes&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; &amp;nbsp;&amp;nbsp &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; Industrial&amp;nbsp;Shoes &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; Safety&amp;nbsp;&amp;&amp;nbsp;Security&amp;nbsp;Shoes &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; Executive&amp;nbsp;Shoes&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a href="#" class="colour"&gt; &amp;nbsp;&amp;nbsp &lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="colour"&gt;Contact Us&lt;/a&gt; 
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="uniform_block"&gt;
        &lt;img src=" http://t0.gstatic.com/images?q=tbn:ANd9GcSH-kRi3rkVciPcH_c6dDJJI6C1ntzwcKl9MoVQIyuKk8F7unpf" /&gt;
      &lt;/div&gt;
      &lt;div class="home_footer"&gt;
        &lt;div class="footer_contents"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>kindly help. My requirement is, when i mouse over the "product menu", the drop down menu should be viewed above the image block which is below the menu bar.</p>