在IE中居中导航菜单中对齐第三级导航

Question

我创建了一个下拉菜单，可以在Firefox中正常工作，但是IE中第三级下拉菜单的对齐方式已经出来了，我找不到原因。

HTML：

<nav class="main-navigation clearfix">

            <ul class=" main-nav-ul">

                <li><a href="">Main Link 1</a></li>

                <li><a href="">Dropdown</a>
                    <ul>
                        <li><a href="">Level 2 Item 1</a></li>
                        <li><a href="">Level 2 Item 2</a>
                            <ul><a href="">Level 3 Item 1</a>
                            </ul>
                        </li>
                        <li><a href="">Level 2 Item 3</a></li>
                    </ul>
                </li>

                <li><a href="">Main Link 3</a></li>

            </ul>

        </nav>

来自styles.less文件的CSS：

.main-navigation {
    text-align: center;
    font-family: @body-font;
}

.main-navigation ul {
    li {
        display: inline;
        text-align: center;
        position: relative;

    a {
    color: lighten(@dark-color, 10%);
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    height: 42px;
    line-height: 42px;
    margin-right: 14px;
    position: relative;

    &:hover {
    color: black;
    }

    &::before {
        content: '|';
        position: absolute;
        font-size: 10px;
        right: -1em;
        top: -1px;
        color: lighten(@dark-color, 50%);

    }

    } //end a

    ul {
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
    -webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    background: @light-text-color;
    border: 1px solid darken(@light-text-color, 10%);
    border-bottom: 0;
    position: absolute;  
    left: -49px; 

    li {

    float: none;
    white-space: nowrap;
    position: relative;


        a {
            padding: 0 14px;
            margin-right: 0;
            border-bottom: 1px solid darken(@light-text-color, 10%);

            &::before {
            content: '';
            }
        } //end a

            ul {

            position: absolute;
            left: 92px;   
            top: -15px;
            opacity: 0;
            filter: alpha(opacity=0);
            visibility: hidden;
            -webkit-transition: opacity 0.2s ease-in;
            -moz-transition: opacity 0.2s ease-in;
            -o-transition: opacity 0.2s ease-in;
            transition: opacity 0.2s ease-in;

            } //end 3rd level ul

    } //end 2nd level li

    } //end ul

        &:hover > ul {
            opacity: 10;
            filter: alpha(opacity=100);
            visibility: visible;
        }


    } //end li

} //end main-navigation ul

我也在使用bootstrap CSS。我对CSS还是很陌生，所以如果编码不太好我会道歉！

由于