0

Facebook、Twitter などのソーシャル シェア リンクを含むドロップダウン メニューを作成しようとしています。

カウント ボタンを使用しており、CSS ドロップダウン メニュー内に配置しています。ドロップダウン メニューの背景にカーソルを置いている限り、問題ありません。IE9 で表示すると、ソーシャル メディア ボタンの 1 つにカーソルを合わせると、ドロップダウン全体が消えます。他のすべてのブラウザは問題なく動作します。ドロップダウンを表示し続けて、ページを気に入ってもらえるようにする方法がわかりません。

: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 に答える