website not working on Internet Explorer

Question

I have a vertical menu in a side bar with a hover over submenu however in IE the hover menu decides to appear in the middle of the page. I'm using IE11 so it doesnt support the IE only css.

I'm not sure what has cause the problem..here is a JSFiddle of the site https://jsfiddle.net/2rhwgymx/

The menu is made from pure CSS so i think it may be something to do with the positioning of the side elements in the side bar...the sidebar however needs to be fixed position...

The code doesn't validate properly however its only small things like "" tags..will that matter?

any help would be greatly appreciated.

Thanks

 <div id="a">
                                                    <ul class="nav">
                    <li><a href="test7.php">Home</a></li>
                    <li><a href="grid.php">Solutions <i class="fa fa-angle-down" style="font-size: 12px;"></i></a>
                        <ul>
                            <li><a href="accounting.php">Accounting</a></li>
                            <li><a href="cloud.php">Cloud Accounting</a></li>
                            <li><a href="tax.php">Tax</a></li>
                            <li><a href="business.php">Business Planning</a></li>
                            <li><a href="future.php">Planning Your Future</a></li>
                        </ul>
                    </li>
                    <li><a href="about.php">About <i class="fa fa-angle-down" style="font-size: 12px;"></i></a>
                        <ul>
                            <li><a href="staff.php">Staff</a></li>
                            <li><a href="values.php">Our Values</a></li>

                        </ul>
                    </li>
                    <li><a href="blog.php">Blog</a></li>


                        <li><a href="contact.php">Contact</a></li>
                </ul>


                              </div>



     #a{
  width: 100%;
  margin-bottom: 50px;
  overflow: hidden;
    }

    #a ul{
    list-style:none;
     text-align: center;
       padding: 0px;
        }

    #a a{
    display: inline-block;
    text-align: center;
    padding: 4px;
    color:#fff;
    font-size:18px;
    padding-bottom:15px;
    text-decoration:none;
    font-weight:300;
    padding-top:10px;
    text-decoration:none;
    z-index:999999;
    width:100%;


    }

    #a a:hover {
  background:#b72629;
    }
    #a li{
    width:100%;
    }
    .nav{padding:none;}

    .nav ul{
    display:none;          /* HIDE ALL INNER UL */
    padding:0px;


    }
    .nav li:hover > ul{
    display:inline-block; 
    padding:0px;        /* SHOW INNER UL ON LI PARENT HOVER */

    position: absolute;
    background:#e95259;
      z-index: 10;

    width:100%;
        margin-left:100px;  
       margin-top: -48px; 
}

.nav li:hover > ul li hover{background:#b72629;}

Answer 1

The problem here is with the way you're positioning the sub-menu; you have it absolutely positioned, and then offset with margins. This works in Microsoft Edge (Internet Explorer's successor) the same as it does in Chrome, but for IE you'll need a different approach.

Start by positioning the nested lists to their parent list items. Find the following, and make the annotated edit (note, width: 100% is not generally needed for li elements):

#a li {
    width: 100%;
    position: relative; /* Add this line */
}

Now the absolutely-positioned ul elements within the li elements will be positioned according to the li element, rather than the nearest positioned ancestor element, or viewport.

Next, remove the margins from the following, and instead position with left and top :

.nav li:hover > ul {
    display:inline-block;
    padding: 0px;
    position: absolute;
    background: #e95259;
    z-index: 10;
    width: 100%;
    margin-left: 100px; /* Replace with `left: 200px;` */
    margin-top:  -48px; /* Replace with `top: 0;`      */
}

Lastly, we want to make sure these sub-menus are visible when revealed. Find the following, and remove the overflow property responsible for hiding these elements:

#a {
    width: 100%;
    margin-bottom: 50px;
    overflow: hidden; /* Remove */
}

The result appears to work as expected in Internet Explorer 11.