this demo of drop down menu will work over all browsers including ie (internet explorer) and it will work on touch devices too if you already have a drop down menu and you want to fix it for ie all you need to do is add aria-haspopup="true" for the li tag

• Menu A
  • Menu A, Item 1
  • Menu A, Item 2
• Menu B
  • Menu B, Item 1
  • Menu B, Item 2
  • Menu B, Item 3

<style type="text/css">
    a, a:hover {
      text-decoration: none;
    }        
    ul#navWrapper {
      border: 0 black dashed;
      margin-left: -39px;
      float: left;
    }    
    ul#navWrapper li {
      border: 0 red dashed;    
      float: left;
      list-style: none;
      margin-right: 0.75em;
      background-color: #aaa;
      padding: 0 0.25em;
    }

    ul#navWrapper li li {
      border: 0 blue dashed;    
      float: none;
      margin-left: -44px;
      margin-top: 3px;
    }
    ul#navWrapper li li:first-child { 
      margin-top: 4px;
    }
    ul#navWrapper ul {
      display: none;
      position: absolute;
      background-color: #FFF; /* For non-CSS3 browsers. */
      background-color: rgba(255, 255, 255, 0);
    }
    ul#navWrapper li:hover ul {
      display: block;
    }
    ul#navWrapper a {
      font-weight: bold;
    }
    ul#navWrapper li:hover {
      background-color: #8C8D61;
    }    
</style>

<ul id="navWrapper"> <!-- Top Nav -->
<li> <!-- Menu A -->
  <a href="pageA.html" aria-haspopup="true">Menu A</a>
  <ul>
    <li><a href="pageA1.html">Menu A, Item 1</a></li>
    <li><a href="pageA2.html">Menu A, Item 2</a></li>
  </ul>
</li> <!-- Menu A -->
<li> <!-- Menu B -->
  <a href="pageB.html" aria-haspopup="true">Menu B</a>
  <ul>
    <li><a href="pageB1.html">Menu B, Item 1</a></li>
    <li><a href="pageB2.html">Menu B, Item 2</a></li>
    <li><a href="pageB3.html">Menu B, Item 3</a></li>        
  </ul>
</li> <!-- Menu B -->
</ul> <!-- Top Nav -->