2014-02-26 37 views
0

我有一个网站,我希望标题稍微放在我的CSS菜单上。当图像悬空并且想要保留我的CSS菜单时,我失去了我的CSS菜单。当图像放在顶部时,纯CSS菜单不起作用

我希望NAVI div中的CSS菜单位于topLayer div中最后一个图像的下面。

任何人都可以请解释一个解决方案。

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> 
+1

你可以发布一个小提琴(http://jsfiddle.net)? – Zword

+0

发布CSS代码。 – ojovirtual

+0

是的,我可以。 :)感谢您的建议。 – b0nana

回答

1

退房这个问题。 Click through a DIV to underlying elements

应该为您解决。基本上将pointer-events:none;添加到您的覆盖图像。

+0

我希望我能说这个工作。但唉,它没有:( – b0nana

+0

在IE 10或更高版本中没有任何支持,这可能是你的问题 – Nevett

+0

我目前使用的是最新版本的Chrome,它不工作 – b0nana