隐藏在另一层后面的翻转层

Question

我有一些图标可以翻转。

http://devjohnson.com/faq

如果您转到右上角并滚动 FB 或 TW 图标，您会看到滚动显示为 10 个像素，其余部分位于灰色层后面。我不知道如何让它出现在前面。我在许多不同的图层上尝试过 z-index，但没有一个显示完全翻转。

任何帮助都会很棒。

谢谢！ 卡罗琳

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> 

在 FB 和 TW 图标的“clickable_div”中的代码中，还有另一个名为“nav_menu”的 div，其中包含到 ask doc 和 Doc Johnson 页面的链接。 instagram、tumbler 和 YouTube “clickable_div”标签不包含此 div。

我建议在您的代码中为此部分尝试以下操作：

-->

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