Question

I have some icons that have a rollover.

If you go to the top right and roll over the FB or the TW icons, you will see the rollover shows up like 10 pixels and the rest is behind the grey layer. I cant figure out how to get it to come to the front. I have tried z-index on many different layers and none of them are revealing the full rollover.

Any help would be great.

Thanks! Caroline

Answer 1

我检查了chrome中的代码，看起来最后三个图标没有子菜单。您拥有的代码如下（从chrome检查器视图源复制：

     <!--<div class="soc_med ten columns omega">-->

<div class="soc_med">

        <div style="float:right; height:100px; margin-top:12px; vertical-   
align:top; overflow:hidden;">

            <div id='wrap'>
                <div id="clickable_div_fb"><a  
href="https://www.facebook.com/TheOriginalDoc" target="_blank"><img 
src="/skin/frontend/dJTheme/default/images/facebook_icon.png" id="fb" /></a>

                    <div id="nav_menu_fb">
                        <ul>
                            <li><a 
href="https://www.facebook.com/TheOriginalDoc" 
target="_blank">DocJohnson</a></li>
                            <li><a 
href="https://www.facebook.com/askthedocshow" target="_blank">Ask The 
Doc</a></li>
                        </ul>
                    </div>
                </div>
                <div id="clickable_div_tw" class="tw"><a 
href="https://twitter.com/theoriginaldoc" target="_blank"><img 
src="/skin/frontend/dJTheme/default/images/twitter_icon.png" 
id="socialImage" /></a>

                    <div id="nav_menu_tw">
                        <ul>
                            <li><a href="https://twitter.com/theoriginaldoc"   
target="_blank">DocJohnson</a></li>
                        <li><a href="https://twitter.com/askthedocshow" 
target="_blank">Ask The Doc</a></li>
                        </ul>
                    </div>

  </div>

 <div id="clickable_div_ig" class="ig"><a  
href="http://instagram.com/docjohnsonusa" target="_blank"><img 
src="/skin/frontend/dJTheme/default/images/instagram_icon.png" /></a>

                </div>
                <div id="clickable_div_tu" class="tu"><a 
href="http://docjohnsonusa.tumblr.com/" target="_blank"><img 
src="/skin/frontend/dJTheme/default/images/tumblr_icon.png" id="socialImage" 
/></a>

                </div>
                <div id="clickable_div_yt" class="yt"><a 
href="https://www.youtube.com/user/DOCJOHNSON1976" target="_blank"><img 
src="/skin/frontend/dJTheme/default/images/youtube_icon.png" /></a>

                </div>
            </div> 

        </div>

在＆＃34; clickable_div＆＃34;中的代码中对于FB和TW图标，还有另一个名为＆＃34; nav_menu＆＃34;其中包含指向doc和Doc Johnson页面的链接。 Instagram，不倒翁和YouTube＆＃34; clickable_div＆＃34;标签不包含此div。

我建议您在代码中尝试以下内容：

- ＆GT;

<div class="soc_med">

        <div style="float:right; height:100px; margin-top:12px; vertical-   
align:top; overflow:hidden;">

            <div id='wrap'>
                <div id="clickable_div_fb"><a  
href="https://www.facebook.com/TheOriginalDoc" target="_blank"><img 
src="/skin/frontend/dJTheme/default/images/facebook_icon.png" id="fb" /></a>

                    <div id="nav_menu_fb">
                        <ul>
                            <li><a 
href="https://www.facebook.com/TheOriginalDoc" 
target="_blank">DocJohnson</a></li>
                            <li><a 
href="https://www.facebook.com/askthedocshow" target="_blank">Ask The 
Doc</a></li>
                        </ul>
                    </div>
                </div>
                <div id="clickable_div_tw" class="tw"><a 
href="https://twitter.com/theoriginaldoc" target="_blank"><img 
src="/skin/frontend/dJTheme/default/images/twitter_icon.png" 
id="socialImage" /></a>

                    <div id="nav_menu_tw">
                        <ul>
                            <li><a href="https://twitter.com/theoriginaldoc"   
target="_blank">DocJohnson</a></li>
                        <li><a href="https://twitter.com/askthedocshow" 
target="_blank">Ask The Doc</a></li>
                        </ul>
                    </div>

  </div>

 <div id="clickable_div_ig" class="ig"><a  
href="http://instagram.com/docjohnsonusa" target="_blank"><img 
src="/skin/frontend/dJTheme/default/images/instagram_icon.png" /></a>

 <div id="nav_menu_ig">
                        <ul>
                            <li><a 
href="https://www.instagram.com/TheOriginalDoc" 
target="_blank">DocJohnson</a></li>
                            <li><a 
href="https://www.instagram.com/askthedocshow" target="_blank">Ask The 
Doc</a></li>
                        </ul>
                    </div>
                </div>

                <div id="clickable_div_tu" class="tu"><a 
href="http://docjohnsonusa.tumblr.com/" target="_blank"><img 
src="/skin/frontend/dJTheme/default/images/tumblr_icon.png" id="socialImage" 
/></a>
<div id="nav_menu_tu">
                        <ul>
                            <li><a 
href="https://www.tumbler.com/TheOriginalDoc" 
target="_blank">DocJohnson</a></li>
                            <li><a 
href="https://www.tumbler.com/askthedocshow" target="_blank">Ask The 
Doc</a></li>
                        </ul>
                    </div>

                </div>

                <div id="clickable_div_yt" class="yt"><a 
href="https://www.youtube.com/user/DOCJOHNSON1976" target="_blank"><img 
src="/skin/frontend/dJTheme/default/images/youtube_icon.png" /></a>
    <div id="nav_menu_yt">
                        <ul>
                            <li><a 
href="https://www.youtube.com/TheOriginalDoc" 
target="_blank">DocJohnson</a></li>
                            <li><a 
href="https://www.youtube.com/askthedocshow" target="_blank">Ask The 
Doc</a></li>
                        </ul>
                    </div>     

                </div>
            </div> 

        </div>

rollover layer hidden behind another layer

1 个答案: