Слой ролловера скрыт за другим слоем

У меня есть иконки, которые имеют ролловер.

http://devjohnson.com/faq

Если вы перейдете в верхний правый угол и наведите курсор на значки FB или TW, вы увидите, что ролловер отображается как 10 пикселей, а остальное находится за серым слоем. Я не могу понять, как заставить его выйти на фронт. Я пробовал z-index на многих разных слоях, и ни один из них не раскрывает полный ролловер.

Любая помощь будет отличной.

Спасибо! Каролина

Источник

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>

в коде внутри clickable_div для значков FB и TW есть еще один div, называемый nav_menu, который содержит ссылки на страницы 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>
Источник
Другие вопросы по тегам