li：悬停在div（小三角）上显示背景图片

Question

项目：http://development.legendarylion.com/

网站正在开发中。试图让一个.png显示在展示的子div上。已经尝试调整z-index，没有效果。

目标：使悬停时出现的.png位于悬停的黑色子div上方，作为指针。

建议？

CSS

#menu li.drop:hover {
background-image:url('../img/style/notch.png');background-position:50% 110%;background-repeat:no-repeat;z-index:600;background-position:absolute; }

HTML

<ul id="menu" > 
      <li class="drop"><a id="menu-anchor-point" class="uppercase" href="#">Armor</a> 
      <div class="dropdown_5columns"> 
      <!--img class="armor-thumb left" src="img/armor-icons/blueprint.jpg" alt="">    
       <div class="col_2"> 
       </div> 
       <div class="col_1"> 
       <h2>Soft</h2> 
       </div>     
       <div class="col_1"> 
       <h2>Hard</h2> 
       </div>     
       <div class="col_1"> 
       <h2>Structured</h2>--> 
       <p class="description"><small></small>Armor comes in different configurations... Here is what to expect when selecting your armor and a list of our armor...</small></p> 
       <h2>Soft</h2> 
       <h2>Hard</h2> 
       <h2>Structured</h2> 
       </div> 
      </li> 
      <li class="drop"><a class="uppercase" href="#">Concealable</a> 
      <div class="dropdown_5columns"> 
       <img class="armor-thumb left" src="img/armor-icons/concealable.jpg" alt=""> 
       <img class="vertical-hr" src="img/vertical-hr.png"> 
       <div class="col_2"> 
       <h3>Male</h3> 
       <hr class="menu-hr"> 
       <p>Revolution</p> 
       <p>Evolution</p> 
       <p>Equinox</p> 
       <p>Lo-Pro</p> 
      </div>   
      <div class="col_2"> 
       <h3>Female</h3> 
       <hr class="menu-hr"> 
       <p>Revolution</p> 
       <p>Evolution</p> 
       <p>Equinox</p> 
       <p>Lo-Pro</p> 
      </div> 
       <div class="right"> 
       <img class="armor-icon right" src="img/armor-icons/concealable.png" alt=""> 
       </div> 
      </li> 
      <li class="drop"><a class="uppercase" href="#">Overt</a> 
      <div class="dropdown_5columns"> 
      <img class="armor-thumb left" src="img/armor-icons/overt.jpg" alt=""> 
      <img class="vertical-hr" src="img/vertical-hr.png"> 
       <div class="col_2"> 
       <h3>Carriers</h3> 
       <hr class="menu-hr"> 
       <p>Quilted Carrier System (QCS)</p> 
       <p>Blauer Armorskin&trade;</p> 
       <p>AE Dress Vest</p> 
       <p>Overt Carrier System (OCS)</p> 
       <p>Med Vest</p> 
       <p>Instructor Vest</p> 
       </div> 
       <div class="col_2"> 
       <h3>Accessories</h3> 
       <hr class="menu-hr"> 
       <p>Med Vest</p> 
       </div> 
       <div class="right"> 
       <img class="armor-icon right" src="img/armor-icons/overt.png" alt=""> 
       </div> 
      </li>   
      <li class="drop"><a class="uppercase" href="#">Tactical</a> 
      <div class="dropdown_5columns"> 
       <img class="armor-thumb left" src="img/armor-icons/tactical.jpg" alt=""> 
       <img class="vertical-hr" src="img/vertical-hr.png"> 
       <div class="col_2"> 
       <h3>Carriers</h3> 
       <hr class="menu-hr"> 
       <p>Lighthawk Series</p> 
       <p>Wolverine</p> 
       <p>Hard Core DM</p> 
       <p>K-9</p> 
       </div> 
       <div class="col_2"> 
       <h3>Accessories</h3> 
       <hr class="menu-hr"> 
       <p>Lighthawk Accessories</p> 
       <p>Pouches</p> 
       <p>Hard Armor</p> 
       <p>Shields</p> 
       <p>Blankets</p> 
       <p>Helments & Face Shields</p> 
       </div> 
       <div class="right"> 
       <img class="armor-icon right" src="img/armor-icons/tactical.png" alt=""> 
       </div> 
      </li> 
      <li><a class="uppercase" href="#">Contact</a> 
      </li> 
     </ul> 
    </div><!--header--> 
     <div id="slideshow"> 
      <ul id="nav"> 
       <li id="next"><a href="#">next</a></li> 
       <li id="prev"><a href="#">prev</a></li> 
      </ul> 
      <ul id="slides"> 
       <li><img src="img/slider-1.jpg" title="" alt="1"></li> 
       <li><img src="img/slider-2.jpg" title="" alt="2"></li> 
       <li><img src="img/slider-3.jpg" title="" alt="3"></li> 
      </ul> 

Answer 1

你需要做的是锚元素来代替：

#menu li.drop:hover a{ 
     background:url('../img/style/notch.png') no-repeat bottom center; 
     position: relative; 
     z-index: 5000; 
}