IE 11忽略了样式

Question

我最近更新了我的旧网站。我在IE 11的每个浏览器中看起来都很棒。我已将它备份并将其移动到可以保持活动状态的位置，而不用担心人们访问它。

You can see it here

这是一个wordpress网站，所以我已经取出了链接和wordpress随机类提供的内容，所以它简单明了。

这是侧面导航栏的HTML

<ul id="side-navigation">
                <div class="menu-side-nav-container">
                    <ul class="menu" id="menu-side-nav">
                        <li class="menu-item menu-item-type-post_type" id="menu-item-949"><a href="#">Trade-marks</a>
                            <ul class="sub-menu">
                                <li class="menu-item" id="menu-item-950"><a href="#">Hiring a Registered Trade-mark Agent</a></li>
                                <li class="menu-item" id="menu-item-951"><a href="#">Preliminary Trade-mark Searches</a></li>
                            </ul>
                        </li>
<li class="menu-item" id="menu-item-939"><a href="#">Value Pricing</a></li>
<li class="menu-item" id="menu-item-80"><a href="#">Our Team</a></li>
<li class="menu-item" id="menu-item-87"><a href="#">Community</a></li>
<li class="menu-item" id="menu-item-86"><a href="#">Testimonials</a></li>
                    </ul>
                </div>          
</ul>

这是CSS

#side-navigation { 
    width: 100%; 
    font-family: Tahoma, Geneva, sans-serif; 
    text-transform: uppercase; 
    font-size: 1.1em; 
    letter-spacing: 2px; 
    line-height: 60px; 
    margin-bottom: 50px;
}

#side-navigation ul { 
    width: 289px; 
    list-style: none;
}

#side-navigation li { 
    clear: both; 
    list-style: none; 
    margin-left: -74px;  
    margin-bottom: -5px; 
    width: 257px; 
    height: 60px; 
    background: url(img/averylawoffice-extras.png) 0px -135px; 
}

#side-navigation li a { 
    text-decoration: none; 
    color: #761616; 
}

#side-navigation li a:hover { 
    color: #c7bd89; 
}



.sub-menu {
    background: url(img/BG.jpg) repeat; 
    left: -9999px;
    letter-spacing: 0;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition:    opacity .4s ease-in-out;
    -ms-transition:     opacity .4s ease-in-out;
    -o-transition:      opacity .4s ease-in-out;
    transition:         opacity .4s ease-in-out;
    margin: -2.5em 0 0 7em;
    width: auto!important;
    z-index: 99;
    border: 1px solid #742222;
    padding: .7em;
}

.sub-menu a {
    border-top: none;
    position: relative;
    padding: 1em;
    width: auto!important;
}


.sub-menu li { 
    margin: -1em!important; 
    background: transparent!important; 
    width: 475px!important;
}


.menu-item:hover {
    display: block;
    position: static;

}

.menu-item:hover > .sub-menu {
    left: auto;
    opacity: 1;
}

这是它应该看起来的样子

但这就是它在IE 11中的样子

我还应该为IE 11做另外一步吗？

更新：

这是她电脑的截图。她在Windows 7上使用IE 11。