Drop down menu disappears when hover over content in IE9

Question

I am trying to create a drop down menu with Social Share links like facebook, twitter, ect.

I am using the count buttons and I place them within the CSS drop down menu. As long as I stay hovered over the background of the drop down menu it is fine. The instant I hover over one of the social media buttons the whole drop down disappears when I view it in IE9. Every other browser works just fine. I do not know how to keep the drop down showing so they can like the page.

I am using drop down with a :hover to show the drop down. How can I get it to work in 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 Used

#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;

}

K. Wong K. Wong · Accepted Answer · 2012-07-02T17:53:57

I had this same problem and resolved it by changing the height of the drop down so it wouldn't drop down past the bottom of the browser window. Can't take credit though, my awesome coworker (aka code genius) figured this out.

Drop down menu disappears when hover over content in IE9

1 Answers