title: How to overlap Navigation Menu over slide image
body: <p>Am trying to make the menu list overlap the slide image using position absolute but can't work it out.</p>
  
  <p>When i try change the position, the menu get mix up. The slide image is relative and the menu list is absolute.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  
    &lt;title&gt;Quantum PC Shop&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="QuantumPCShop.css"&gt;
  
  
  
  
    &lt;link rel="stylesheet" type="text/css" href="MangaPage.css"&gt;
    &lt;script src="jquery-2.1.4.min.js"&gt;&lt;/script&gt;
    &lt;link href="owl.carousel.css" rel="stylesheet"&gt;
    &lt;link href="owl.theme.css" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  
              &lt;!--&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; Nav Menu &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;--&gt;
  
  &lt;center&gt;
  &lt;div class="BodyNav2"&gt;
                &lt;div class="Menu"&gt;
                &lt;ul  id="css3menu_middle"&gt;
                  &lt;li&gt;New Arrival
                    &lt;ul&gt;&lt;li&gt;HDD&lt;/li&gt;
                        &lt;li&gt;Purchase History&lt;/li&gt;
                        &lt;li&gt;Messages&lt;/li&gt;
                        &lt;li&gt;Wish List&lt;/li&gt;
                    &lt;/ul&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul id="css3menu_middle"&gt;
                  &lt;li&gt;Motherboard
                    &lt;ul&gt;&lt;li&gt;Summary&lt;/li&gt;
                        &lt;li&gt;Purchase History&lt;/li&gt;
                        &lt;li&gt;Messages&lt;/li&gt;
                        &lt;li&gt;Wish List&lt;/li&gt;
                    &lt;/ul&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul id="css3menu_middle"&gt;
                  &lt;li&gt;Hard Disk
                    &lt;ul&gt;&lt;li&gt;Summary&lt;/li&gt;
                        &lt;li&gt;Purchase History&lt;/li&gt;
                        &lt;li&gt;Messages&lt;/li&gt;
                        &lt;li&gt;Wish List&lt;/li&gt;
                    &lt;/ul&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul id="css3menu_middle"&gt;
                  &lt;li&gt;Graphic Card
                    &lt;ul&gt;&lt;li&gt;Summary&lt;/li&gt;
                        &lt;li&gt;Purchase History&lt;/li&gt;
                        &lt;li&gt;Messages&lt;/li&gt;
                        &lt;li&gt;Wish List&lt;/li&gt;
                    &lt;/ul&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul id="css3menu_middle"&gt;
                  &lt;li&gt;CPU
                    &lt;ul&gt;&lt;li&gt;Summary&lt;/li&gt;
                        &lt;li&gt;Purchase History&lt;/li&gt;
                        &lt;li&gt;Messages&lt;/li&gt;
                        &lt;li&gt;Wish List&lt;/li&gt;
                    &lt;/ul&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul id="css3menu_middle"&gt;
                  &lt;li&gt;PSU
                    &lt;ul&gt;&lt;li&gt;Summary&lt;/li&gt;
                        &lt;li&gt;Purchase History&lt;/li&gt;
                        &lt;li&gt;Messages&lt;/li&gt;
                        &lt;li&gt;Wish List&lt;/li&gt;
                    &lt;/ul&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul id="css3menu_middle"&gt;
                  &lt;li&gt;Cooling System
                    &lt;ul&gt;&lt;li&gt;Summary&lt;/li&gt;
                        &lt;li&gt;Purchase History&lt;/li&gt;
                        &lt;li&gt;Messages&lt;/li&gt;
                        &lt;li&gt;Wish List&lt;/li&gt;
                    &lt;/ul&gt;&lt;/li&gt;
                &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;center&gt;
  
  
  &lt;div class="bodyContentSlide"&gt;&lt;br&gt;
  
  
  
                  &lt;div id="owl-demo" class="owl-carousel"&gt;
  
                    &lt;div class="item"&gt;&lt;img src="Style1.jpg" alt="The Last of us"&gt;&lt;/div&gt;
                    &lt;div class="item"&gt;&lt;img src="Style2.jpg" alt="GTA V"&gt;&lt;/div&gt;
                    &lt;div class="item"&gt;&lt;img src="Style3.jpg" alt="Mirror Edge"&gt;&lt;/div&gt;
                    &lt;div class="item"&gt;&lt;img src="Style4.gif" alt="The Last of us"&gt;&lt;/div&gt;
                    &lt;div class="item"&gt;&lt;img src="Style5.jpg" alt="GTA V"&gt;&lt;/div&gt;
  
  
  
                  &lt;/div&gt;
  
  
        &lt;script src="owl.carousel.js"&gt;&lt;/script&gt;
  
        &lt;style&gt;
        #owl-demo .item img{
            display: block;
            width: 100%;
            height: auto;
            
        }
        &lt;/style&gt;
  
  
        &lt;script&gt;
        $(document).ready(function() {
          $("#owl-demo").owlCarousel({
  
          navigation : true,
          slideSpeed : 300,
          paginationSpeed : 400,
          singleItem : true
  
          });
        });
        &lt;/script&gt;
  
  
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/htmL&gt;</code></pre>
  </div>
  </div>
  </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>div.headerArea {
    margin-top: -70px;
    height:10px;
  
  }
  
  div.HearderAfterBorder{
      display: inline-block;
      margin-left:-20px;
      padding-top: 50px;
  }
  
  
  body {
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /*padding: 20px 50px 150px;*/
    font-size: 13px;
    text-align: center;
    /*margin-left:-1000px;*/
    //background: url(wallAbstrack.jpg);
    background-color: #f9f9f9;
  text-shadow: 0 -1px 0 #000;
  
  }
  
  
  
  
  ul#css3menu_middle{
  text-align: center;
  display: inline;
  margin: 0;
  padding: 15px 4px 7px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  
  
  }
  
  .sub1{
    position: absolute;
  }
  
  ul#css3menu_middle li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 54px;
  background: #EBFFD6;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  height: 7px;
  top:0px;
  }
  
  ul#css3menu_middle li:hover {
  background: #555;
  color: #fff;
  
  }
  ul#css3menu_middle li ul {
  padding: 0;
  position: absolute;
  top: 38px;
  left: 0;
  width: 173px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  
  }
  ul#css3menu_middle li ul li {
  background: #555;
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
  
  }
  ul#css3menu_middle li ul li:hover { background: #666; }
  ul#css3menu_middle li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  
  }
  
  
  /*&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; Body Content Slide &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; */
  
  div.BodyNav2{
  
  }
  div.bodyContentSlide{
    height:500px;
    border: 0px solid;
    width:95%;
    align-content: center;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://1drv.ms/1NKikoZ" rel="nofollow">Download full code/files(TestSlid)</a></p>