CODEWITHSUNDEEP
htmlcss
b0nana
b0nana

Reputation: 5

Pure CSS Menu Doesn't Work When Image Laid on Top

I have a website made where I want the header to slightly lay on top of my CSS menu. I lose my CSS menu when the image is laid overtop and would like to retain my CSS menu.

I want the CSS menu in the NAVI div to lay underneath the last image in the topLayer div.

Can anyone please explain a solution.

http://jsfiddle.net/hjkopytko/AfWD5/

HTML:

<body>
<div class="wrapper">
  <header>
    <div class="topLayer">
     <a href="https://www.facebook.com/sawascana" target="_blank"><img src="media/images/metalFacebook.png" width="50" height="50"
                style="display:block;position:absolute;margin-left:1050px;margin-top:25px;z-index:10" /></a><a href="https://twitter.com/sawascana" target="_blank"><img src="media/images/metal-twitter.png" width="50" height="50" 
                style="display:block;position:absolute;margin-left:1050px;margin-top:100px; z-index:10"/></a><a href="index.html"><img src="media/images/logoWhiteText.png" width="400" height="103" 
                    style="display:block; position:absolute;margin-left:75px;margin-top:25px;z-index:10;"/></a> <img src="media/images/metalTop.png" width="1200" height="373" style="display:block;auto;z-index:5" />
   </div><!-- end of topLayer-->
  </header> <!----- end of header--> 
 <div class="container">
    <div class="whiteContainer">
      <div id="navi"> 
        <!-- the left side of the fork effect -->
        <div class="l-triangle-top"></div>
        <div class="l-triangle-bottom"></div>
        <div class="rec">
          <ul>
            <li class="sa">YOUR SA
              <ul>
                <li class="sa">Executive Council</li>
                <li class="sa">Bylaws</li>
                <li class="sa">Minutes</li>
                <li class="sa">Mission/Vision</li>
                <li class="sa">Reports</li>
                <li class="sa">SIAST Board Rep</li>
              </ul>
            </li>
            <li class="campus">CAMPUS LIFE
              <ul>
                <li class="campus">Blood Clinics</li>
                <li class="campus">Campus Policies</li>
                <li class="campus">Events</li>
                <li class="campus">Fitness Club</li>
                <li class="campus">Student Lounge</li>
                <li class="campus">Orientation</li>
                <li class="campus">Promotions</li>
                <li class="campus">Spirit Awards</li>
                <li class="campus">S A F E</li>
              </ul>
            </li>
            <li class="service">SERVICES
              <ul>
                <li class="service">Info</li>
                <li class="service">Aboriginal Awareness</li>
                <li class="service">AGM</li>
                <li class="service">Health & Dental</li>
                <li class="service">Advocacy/Rep</li>
                <li class="service">Campus Shop</li>
                <li class="service">Dean's Interaction</li>
                <li class="service">Income Tax Returns</li>
                <li class="service">Legal Consultation</li>
              </ul>
            </li>
            <li class="involve">GET INVOLVED
              <ul>
                <li class="involve">Campus Groups</li>
                <li class="involve">Leadership</li>
                <li class="involve">Program Rep</li>
                <li class="involve">Sub Committees</li>
                <li class="involve">Volunteering</li>
              </ul>
            </li>
            <li class="hello">CONTACT
              <ul>
                <li class="hello">Ad Opportunities</li>
                <li class="hello">Contact Form</li>
                <li class="hello">Office Info</li>
                <li class="hello">Staff</li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="r-triangle-top"></div>
        <div class="r-triangle-bottom"></div>
      </div>
      <!-- end of nav -->
      <div id="slider" style="top:-125px;"> <!--<a href="#" class="control_next">&gt;</a> <a href="#" class="control_prev">&lt;</a>-->
        <ul>
          <li><img src="media/images/banner1.jpg" /></li>
          <li><img src="media/images/banner2.jpg"/></li>
        </ul>
      </div> <!--end of slider-->
      <div id="column">
      <p>Left Column</p>
      </div>
      <div class="column">
      <p>right column</p>
    </div>
    <!--End of white container--> 

  </div>
  <!-- end .container-->

  <div class="push"></div>
  <!---meant to push content to bottom of page--> 
</div>
<footer> 
  <!---wrapper--> 
  <img src="media/images/metalBottom.png" width="1200" height="269" style="display:block; margin-left:auto; margin-right:auto ;z-index:10;" /> </footer>
</body>

Upvotes: 0

Views: 171

Answers (1)

jopfre
jopfre

Reputation: 503

Check out this question. Click through a DIV to underlying elements

Should fix it for you. Basically add pointer-events:none; to your overlaid image.

Upvotes: 1

Related Questions