CSS3 not working with ie 11 but works for chrome [on hold]

I just noticed my html css3 code does not work on ie 11 in my sharepoint 2010 site but it works fine on chrome. I am trying to figure out why this is happening but I cannot find a solution. I am wondering if anyone happens to know how I can fix this so that my html menu shows in a ie 11 browser?

In IE 11 browser it shows my menu as bullet points and not in HTML

example: this is how it shows on IE 11 browser

 Connect Site 
•Reporting Analytics 
  ◦HECC
  ◦AFF 
  ◦DLFC 
•Support 

While in Chrome my html navigation menu shows perfectly with no problem. How can I make my html menu work in ie 11

here is my code

<style>
  .s4-wpTopTable {
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-size: 97%;
  }
  nav {
    /* Repeating background image */
    background: #71bbd1;
    width: 300px;
    margin: 20px;
  }
  nav ul {
    /* Removes bullet points */
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav ul li {
    /* Any child positioned absolutely will be positioned relative to this */
    position: relative;
  }
  nav a {
    color: #000000;
    padding: 12px 0px;
    /* Fill all available horizontal space */
    display: block;
    /* Remove underline */
    text-decoration: none;
    /* New CSS3 animations: apply transition to background property, taking 1s to change it */
    transition: background 1s;
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
    font-family: tahoma;
    font-size: 13px;
    text-transform: uppercase;
    padding-left: 20px;
  }
  nav a:hover {
    /* RGBA background for transparancy: last number(0.05) is the transparency */
    background: RGBA(255, 255, 255, 0.05);
    color: #fff;
  }
  nav a:hover span {
    background: #7d2c41;
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
  nav ul > li:hover > ul {
    display: block;
  }
  nav ul ul {
    position: absolute;
    left: 300px;
    top: 0;
    border-top: 1px solid #e9e9e9;
    display: none;
  }
  nav ul ul li {
    width: 200px;
    background: #f1f1f1;
    border: 1px solid #e9e9e9;
    border-top: 0;
  }
  nav ul ul li a {
    color: #a8a8a8;
    font-size: 12px;
    text-transform: none;
  }
  nav ul ul li a:hover {
    color: #929292;
  }
  nav ul ul ul li {
    width: 200px;
    background: #f1f1f1;
    border: 1px solid #e9e9e9;
    border-top: 0;
  }
  nav ul ul ul li a {
    font-size: 12px;
    text-transform: none;
  }
  nav ul ul ul li a:hover {
    color: #0000FF;
  }
  nav ul ul ul ul li {
    width: 200px;
    background: #0000FF;
    border: 1px solid #e9e9e9;
    border-top: 0;
  }
  nav ul ul ul ul li a {
    font-size: 12px;
    text-transform: none;
  }
  nav ul ul ul ul li a:hover {}nav ul ul ul {
    position: absolute;
    left: 200px;
    top: 0;
    border-top: 1px solid #e9e9e9;
    display: none;
  }
  nav span {
    width: 12px;
    height: 12px;
    background: #fff;
    display: inline-block;
    float: left;
    margin-top: 3px;
    margin-right: 20px;
    position: relative;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
  }
  nav span:before {
    content: "";
    width: 12px;
    height: 2px;
    background: #71bbd1;
    position: absolute;
    left: 0px;
    top: 5px;
  }
  nav span:after {
    content: "";
    width: 2px;
    height: 12px;
    background: #71bbd1;
    position: absolute;
    left: 5px;
    position: top;
  }
</style>
<nav>
  <ul>
    <li class="current"><a href="#"><span></span> Connect Site </a></li>
    <li> <a href="#"><span></span>Reporting Analytics </a> 
      <ul>
        <li> <a href="#">HECC</a></li>
        <li> <a href="#">AFF </a></li>
        <li> <a href="#">DLFC </a></li>
      </ul>
    </li>
    <li> <a href=""><span></span>support </a> 
      <ul>
        <li> <a href="#">BCP</a>
        </li>
        <li> <a href="#">Management</a></li>
        <li> <a href="#">Support </a> <ul>
            <li> <a href="#">HR </a></li>
          </ul>
        </li>
        <li> <a href="#">test</a> 
          <ul>
            <li> <a href="#">test2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="#"><span></span>Process</a></li>
    <li> <a href="#"><span></span>Portal </a></li>
  </ul>
</nav>