Question

我正在尝试使用社交分享链接创建一个下拉菜单，例如facebook，twitter等。

我正在使用计数按钮，我将它们放在CSS下拉菜单中。只要我停留在下拉菜单的背景上就可以了。当我在IE9中查看时，当我将鼠标悬停在其中一个社交媒体按钮上时，整个下拉消失。其他所有浏览器都运行正常。我不知道如何保持下拉显示，以便他们可以喜欢该页面。

我正在使用下拉菜单：悬停以显示下拉菜单。我怎样才能让它在EI9中运行？

HTML

<div id="wrapper_menu"><!-- BEGIN MENU WRAPPER -->    
   <ul class="menu menu_black"><!-- BEGIN MENU -->        
        <li>Share this Page<!-- Begin Home Item -->                        
            <div class="dropdown_2columns"><!-- Begin 2 columns container -->                          
                <div class="col_2 firstcolumn">
                    <div class="col_left">
                        <g:plusone size="tall"></g:plusone>
                    </div>
                    <div class="col_right">
                        <div class="fb-like" data-send="false" data-layout="box_count" data-width="55" data-show-faces="true">
                    </div>                                   
                </div>                
            </div><!-- End 2 columns container -->
        </li><!-- End Home Item -->
    </ul><!-- END MENU -->
</div><!-- END MENU WRAPPER -->

使用CSS

#wrapper_menu {width: 100%; margin:0 auto; display:block; position: relative; z-index:9999;}
#wrapper_menu .menu {list-style:none; width:100%; height:45px;} 
.menu li {float:left; text-align:center; position:relative; margin-right:20px; margin-top:6px; border:none; height: 30px;}
.menu li:hover {}

/*  _______________________________________
    02 DROP DOWN MENU
    _____________________________________  */


/* Left & right aligned common styles */  

.menu .dropdown_2columns,   
.menu .dropdown_fullwidth {
    margin: 2px; 
    left:-999em; 
    position:absolute; 
    background:#161616; 
    border: 2px solid #cdccc3; 
    padding: 10px; 
    text-align:left; 
        -moz-border-radius: 5px 5px 5px 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        -khtml-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
    background:rgba(255,255,255, 0.8);
} 
/* Drop Downs Sizes */
.menu .dropdown_2columns {width: 160px;}

/* Showing Drop Down on Mouse Hover - Left aligned */
.menu li:hover .dropdown_2columns {left:-7px; top:25px;}

/* Columns Sizes */
.menu .col_2 {width:155px; display:inline; float: left; position: relative; margin-left: 10px;}

.col_left {float: left; width: 49%;}
.col_right {float: right; width: 49%;}

/* IMPORTANT use the firstcolumn class for the items that stick to the left edge of the dropdown */

.menu .firstcolumn {

    margin-left: 0; /* Clearing margin & left */

    clear: left;

}

Answer 1

我遇到了同样的问题并通过更改下拉列表的高度来解决它，因此它不会从浏览器窗口的底部下降。虽然无法获得信誉，但我真棒的同事（又名代码天才）想出了这一点。

将鼠标悬停在IE9中的内容上时，下拉菜单会消失

1 个答案: