2012-04-30 45 views
0

我正在嘗試使用社交分享鏈接(如Facebook,Twitter等)創建一個下拉菜單。當鼠標懸停在IE9的內容上時,下拉菜單消失

我正在使用計數按鈕,並將它們放置在CSS下拉菜單中。只要我保持在下拉菜單的背景下懸停就好了。當我在IE9中查看它時,我將鼠標懸停在其中一個社交媒體按鈕上,整個下拉菜單消失。其他瀏覽器都可以正常工作。我不知道如何保持顯示下拉菜單,以便他們可以喜歡該頁面。

我正在使用a: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; 

} 
+0

請添加一些代碼或此行爲的示例。 –

回答

1

我有這個同樣的問題,通過改變下降的高度往下解決它,所以它不會下拉過去瀏覽器底部窗口。雖然不能相信,但我真棒的同事(aka代碼天才)明白了這一點。

相關問題