Im developing a side menu for mobile versions using jQuery and its working fine on google chrome but dont in default browser of android ( I think it is internet explorer).

Im using "sidr plugin", and I followed the documentation here "http://www.berriart.com/sidr/" and the menu is already working fine.

In Desktop Versions :

In chrome and mozzila is working fine.

In internet explorer Im getting a strange effect, my submenus items appears with more height that its normal but when I enter the mouse over my submenus items they get the right height 

In mobile version:

On google chrome and mozilla is working fine.

In internet explorer ( android defaut browser),   when I click in the link to open my side menu, the side menu opens but it opens also my submenu item of the menu item that is aligned with my link to open the side menu.

Do you know why this is happening?? 

1. <section id="menu-container">
2.        <nav id="menu">
3.         <ul>    
4.             <li class="menu_lateral"><a href="#" id="simple-menu"><i class="fa fa-bars"></i></a></li>
5.             <li class="submenu"><a class="nav" href="#">Item 1</a>
6.                 <ul>
7.                     <li><a  href="#">Item 1.1</a></li>
8.                     <li><a  href="#">Item 1.2</a></li>
9.                 </ul>
10.             </li>
11.              <li class="submenu"><a class="nav" href="#">Item 2</a>
12.                 <ul>
13.                     <li><a  href="#">Item 2.1</a></li>
14.                     <li><a  href="#">Item 2.2</a></li>
15.                 </ul>
16.             </li>     
17.           </ul>
18.     </nav> 
19.      
20.   //My sidr side menu
21.      <nav id="sidr"  style="display:none;">
22.         <ul>
23.             <li><a href="index.php"><img src="../image1.png"/></a></li>  
24.             <li><a  href="#">Item 1</a>
25.                 <ul class="sub-menu-sidr">
26.                     <li><a href="#">Item 1.1</a></li>
27.                     <li><a href="#">Item 1.2</a></li>
28.                 </ul>
29.             </li>
30.             <li><a href="#">Item 2</a>
31.                 <ul  class="sub-menu-sidr">
32.                     <li><a href="#">Item 2.1</a></li>
33.                 </ul>
34.             </li>
35.        </ul>
36.     </nav>   
37.   </section>

1. (document).ready(function() {
2.       $('#simple-menu').sidr({
3.        name: 'sidr', 
4.           speed: 200, 
5.           side: 'left',
6.           source: null, 
7.           renaming: true, 
8.           body: 'body'    
9.      });
10.     });
11. $(document).ready(function() {
12.    $('.sub-menu-sidr').hide();
13.    $("#sidr li:has(ul)").click(function(){
14.       $("ul",this).toggle('fast');
15.    });
16. });