rollover layer hidden behind another layer

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

Just as a hint: the rollover boxes are not _behind_ the gray layer, instead they can’t get _beyond_ the blue and red strip at the top, because this strip has `overflow: hidden`. — Sebastian Simon, Jul 31 '15 at 20:20
Ok - I got that - now its stuck behind the search and i cant roll my mouse down... — Caroline, Jul 31 '15 at 20:28
I've tried all kinds of z-index changes still and I cant get it on top of the search box — Caroline, Jul 31 '15 at 21:10
maybe add a `position: relative` to that sub-menu, `#nav_menu_fb` and the other one, `#nav_menu_tw` — RGLSV, Jul 31 '15 at 21:11

score 0 · Answer 1 · answered Aug 01 '15 at 06:04

I inspected the code in chrome and it looks like there are no sub-menus for the last three icons. the code as you have it is as follows (copied from chrome inspector view source:

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

in the code within the "clickable_div" for the FB and TW icons, there is another div called "nav_menu" which contains the links to the ask doc and Doc Johnson pages. The instagram, tumbler and YouTube "clickable_div" tags do not contain this div.

I suggest trying the following for this section in your code:

-->

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