CSS3下拉菜单链接在iOS中不起作用

Question

I have an issue with iOS not loading the dropdown menu links, it works fine in others, only iOS.

Live Site: http://sandbox.myramani.com/espace/

Basically when you view it via any iOS browser, the navigation dropdown links do not link to the interior pages, instead it just refreshes the homepage. Can anyone help me figure out why this is occurring?

CSS:

#nav ul li ul.dd {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:absolute;
z-index:99;
top:60px;
left:0px;
margin-left:0px;
width:220px;
background:#fff;
display:none;
box-shadow: 0px 0px 10px rgba(0,0,0,.4);
padding-bottom:10px;}

#nav ul li:hover ul.dd, #nav ul li:focus ul.dd {
display: block;
}

Answer 1

What is the reason for:

onclick="return true" 

on the ? Could be the issue. I don't see the need for an JS on those.

Answer 2

IOS ignores any links that have display:none OR visibility:hidden -- even if the :hover shows it. I can't remember the specifics.

Now I have the quote from Apple:

"if the contents of the page changes on the mousemove event, no subsequent events in the sequence are sent."

Replace with the following:

       #nav ul li ul.dd {
          box-sizing:border-box;
          -webkit-box-sizing:border-box;
          -moz-box-sizing:border-box;
          position:absolute;
          z-index:99;
          top:60px;
          left:0px;
          margin-left:0px;
          background:#fff;
          opacity:0; /* added */
          width:0px;/* added */
          height:0px;/* added */
          overflow:hidden;/* added */
          box-shadow: 0px 0px 10px rgba(0,0,0,.4);
          padding-bottom:10px;
      }

        #nav ul li:hover ul.dd, #nav ul li:focus ul.dd {
           opacity:1;
           width:220px;
           height:auto;
           overflow:visible;
        }