Question

Project: http://development.legendarylion.com/

Website in development. Trying to get a .png to show up over a child div on show. Already tried adjusting z-index, no effect.

The goal: to have the .png which appears on hover, and is positioned, appear over the black child div on hover as a pointer.

Suggestions?

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

You need to do it on the anchor element instead:

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