Why is that this sub-menu can't be clicked on iPhone?

Why is that this sub-menu can't be clicked on iPhone?

This is the site: http://www.bcmade.ca/
This is the CSS:
#navbar {
display: none;
background: none;
height: auto;
margin-bottom: 10px !important;
}
#navbar li {
border-width: 0;
float: none;
margin: 2px 0;
position: relative;
}
#navbar li:hover ul,
#navbar li.over ul {
display: none;
}
#navbar li .arrow {
background: url(../images/icons/icon-arrow.png) no-repeat 11px 13px;
position: absolute;
top: 0;
right: 0;
width: 35px !important;
height: 35px;
padding: 0;
}
#navbar li a {
width: auto !important;
}
#navbar li ul {
background: #FFF;
border-width: 0;
margin-top: 2px;
margin-bottom: 2px;
position: static;
}
#navbar li ul {
display: none;
}
#navbar li ul li {
margin: 0;
padding: 0;
}
#navbar li ul li a {
background: none;
border-top-width: 0 !important;
border-left-width: 0 !important;
border-right-width: 0 !important;
border-bottom: 1px solid #DDD !important;
}
#navbar li ul li:last-child a{
border-bottom-width: 0 !important;
}
If you click narrow the browser (320px) in the mobile version of the site
you click the Menu button and then expand the subcategories with the arrow
you can see the sub-categories.
The sub-categories can be perfectly clicked on desktop and Android phones.
But apparently on iPhone they can't.
What could be the reason?