Mobile menu not working - html

Question

I need a drop down menu that will be kept open after I click. Now when I click to open the submenu, it closes and I need to again open it all the way. But if it were kept open, then it would be easier. Try the site with mobile and then you will understand.
site link is:
www.banglardamal.org/test2
CSS is:
/* ======= Nav =======*/
.navbar-default {
border-color: transparent;
background-color: white;
}
.navbar-default .navbar-brand {
font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
color: black;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
color:darkgray;
}
.navbar-default .navbar-collapse {
border-color: rgba(255,255,255,.02);
}
.navbar-default .navbar-toggle {
border-color: white;
background-color: white;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #222;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: lightgrey;
}
.navbar-default .nav li a {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
letter-spacing: 1px;
color: #222;
}
.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
outline: 0;
color: darkgray;
}
.navbar-default .navbar-nav>.active>a {
border-radius: 0;
color: #fff;
background-color: darkgray;
}
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #fff;
background-color: darkgray;
}
#media(min-width:768px) {
.navbar-default {
padding: 25px 0;
border: 0;
background-color: transparent;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-default .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-default .navbar-nav>.active>a {
border-radius: 3px;
}
.navbar-default.navbar-shrink { <!--For floating navbar that changes colour while scrooling-->
padding: 10px 0;
background-color:white;
}
.navbar-default.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}