IE 8中的下拉菜单中断

Question

我正在使用基于此tutorial的网站的响应式菜单。

目前我只使用无响应功能＆amp;在FF，Chrome和IE 9中工作正常，但在测试期间（F12）在IE 8标准视图中中断。

我正在使用以下css＆amp;已经在jsfiddle上设置了一个示例，也指向jsfiddle框架的直接链接是here

当我使用相同的CSS时，实际教程在IE 8中没有中断，但由于某种原因它仍然会中断。

我已经解决了这个问题很长一段时间但到目前为止我无法解决这个问题。

我很感激为此提供帮助。

HTML

<!-- main Container -->
<div class="main-wrapper">
    <!-- Header -->
    <div class="header-wrapper">

        <!-- Menu -->
        <div class="menu-wrapper">
            <div class="navbar">                             
                    <nav id="menu" class="menu">
                        <ul>
                        <li><a href="en/1/1/Home">Home</a></li>
                        <li class="has-submenu"><a href="#">Chairman</a>
                            <ul class="has-submenu">
                                <li><a href="en/page/1/3/">Parent Menu</a></li>
                                <li><a href="en/page/1/4/">Child Menu</a></li>
                                <li><a href="en/page/1/5/">Child Menu</a></li>
                                <li><a href="en/page/1/6/">Child Menu</a></li>
                            </ul>
                        </li>
                        <li><a href="en/page/1/7/">Parent menu</a></li>
                        <li class="has-submenu"><a href="#">Parent Menu 2</a>
                            <ul class="has-submenu">
                                <li><a href="en/page/1/9/">Child Menu 2</a></li>
                                <li><a href="en/page/1/10/">Child Menu 2</a></li>
                            </ul>
                        </li>
                        <li><a href="en/page/1/25/">Contact</a></li></ul>  
                    </nav>                                       
           </div>
        </div>
        <!-- Menu -->
     </div>
     <!-- Header -->

</div>
<!-- main Container -->

CSS

.menu-wrapper
{
    height:30px;
}
.navbar
{
    background-color:Green;
    margin-left:250px;
}


/* CSS FOR MENU */
.menu  
{ 
    /*  font-family:'Open Sans', sans-serif; font-family: 'Roboto', sans-serif;*/
    font-size:13px;
    font-weight:400;
    color: #687074;
    float: left; 
    max-width: 60em;
    border:0px solid red;

}
.menu ul  
{
    z-index:500;
    padding: 0px;
    margin: 0px;
    list-style: none;
    position: relative;
    display: inline-table;
}
.menu > li > ul.sub-menu {
    min-width: 10em;
    padding: 4px 0;
    background-color: #f4f4f4;
    border: 0px solid #CCC;
    border: 0px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;

}
.menu ul:after {
    content: ""; clear: both; display: block;
}
.menu ul li {
    padding: 0px;
}
.menu > ul > li { 
    display: inline-block;
}
.menu ul li a { 
    display: block;
    text-decoration: none;
    color: #687074; /* link color*/
}
.menu ul li a:hover { 
    display: block;
    text-decoration: none;
    color: #028F41; /* link color hover*/
}
.menu ul li > a  
{
    color:#687074;
    padding: 5px 12px;  
}
.menu ul ul { 
    display: none; 
    position: absolute; 
    top:100%;
    min-width: 160px;
    border: 0px solid #CCC;
    border: 0px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.menu ul li:hover > ul {
    display: block;
}
.menu ul ul > li {
    position: relative;
}
.menu ul ul > li a {
    padding: 5px 15px 5px 10px;
    height: auto;
    background-image:url("../images/nav-dd-background.png"); 
    color:#000;
    /*-webkit-transition: background-color 0.2s ease-out;  
    -moz-transition: background-color 0.2s ease-out;
    -ms-transition: background-color 0.2s ease-out;
    -o-transition: background-color 0.2s ease-out;
    transition: background-color 0.2s ease-out; */
}
.menu ul ul > li a:hover {
    background-color: #028F41; /* hover background color background-color: rgba(174, 92,16, 0.9);*/
    color: #000;
}
.menu ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}
    /* Code to create TRIANGLE POINTER */
    .menu ul ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 10px;
        top: -5px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #0A8F36;
        opacity:0.6;
    }

更新：使用HTML Shiv JS解决了问题

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->