0

我正在尝试创建一个带有社交共享链接的下拉菜单，例如 facebook、twitter 等。

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

我正在使用带有 :hover 的下拉菜单来显示下拉菜单。我怎样才能让它在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;

}
4

1 回答 1

1

我遇到了同样的问题，并通过更改下拉菜单的高度来解决它，这样它就不会下降到浏览器窗口的底部之外。但不能相信，我很棒的同事（又名代码天才）发现了这一点。

于 2012-07-02T17:53:57.937 回答