Mam mały problem, zrobiłem na swojej stronie menu w CSS, po najechaniu rozwija się w dół.

Działa na Windowsie, nawet na Androidzie (testowane na Galaxy S, po kliknieciu na tekst, rozwineło się), natomiast na Applu (iPad 2) rozwija się tylko wtedy, jak kliknie się na małą strzałeczkę obok, a jak ją usunąłem to nie ma jak go rozwinąć, czy może ktoś ma doświadczenie z tego typu sprawą i może pomóc?

CSS:

ul#navigation-1
    { 
        position: absolute;
        top: 193px;
      margin-right: 30px; 
      padding:0;
      text-align: left; 
      list-style:none;
      width:100%;
      height:25px;
      font-family: "Century Gothic";
    font-size: 17px;
    color: #1a3643;
    text-decoration: none; 
      width: 740px;}
ul#navigation-1 li
 
    { 
      height:25px;
      text-align:center;
      margin:0;
      padding:0;
      display:block;
      float:left;
      position:relative;
      width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
    { padding:0;
      display:block;
      text-align:center;
      text-decoration:none;
      background:#FFFFFF;
      color:#1a3643;
      width:148px;
      height:25px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
    { padding:0;
      display:block;
      text-align:center;
      text-decoration:none;
      background:#FFFFFF;
      color:#1a3643;
      width:148px;
      height:25px; }
 
ul#navigation-1 li ul.navigation-2
 
    { 
        font-size: 13px;
        margin:0;
      padding:0;
      list-style:none;
      display:none;
      background:#ffffff;
      width:148px;
      position:absolute;
      top:25px;
      left:-1px;
      border:1px solid #ffffff;
      border-top:none; 
      }
ul#navigation-1 li:hover ul.navigation-2
    {
        display:block;
        }
ul#navigation-1 li ul.navigation-2 li
    { width:148px;
      text-align:left;
      clear:left;
      width:148px; }
 
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
    { clear:left;
      background:#FFFFFF;
      padding:4px 0;
      width:148px;
      border:none;
      text-align:left;
      position:relative;
      z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
    { clear:left;
      background:#e0e0e0;
      padding:4px 0;
      width:148px;
      border:none;
      position:relative;
      z-index:1000; }
ul#navigation-1 li ul.navigation-2 li a span
    { position:absolute;
      top:0;
      left:132px;
      font-size:12pt;
      color:#1a3643; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
    { position:absolute;
      top:0;
      left:132px;
      font-size:12pt;
      color:#1a3643; }

HTML:

<html>
<head>
 
<link rel="Stylesheet" type="text/css" media="all" href="layout.css" />
</head>
<body>
    <ul id="navigation-1">
        <li>AAAAAAA
        <ul class="navigation-2">
 
                <li><a href="#">@elem.name</a>
                    </li><li><a href="#">@elem.name</a>
                    </li><li><a href="#">@elem.name</a>
                    </li><li><a href="#">@elem.name</a>
                    </li><li><a href="#">@elem.name</a>
                    </li><li><a href="#">@elem.name</a>
                    </li><li><a href="#">@elem.name</a>
                    </li>
 
                </ul>
 
        </li>
 
        <li><a href="#">AAAAeOFE</a>
        </li>
        <li><a href="#">@AAAAAut_Waluty</a>
        </li>
        <li><a href="#">nAAAAAAAdeksy</a>
        </li>
        <li><a href="#">nAAAAAA</a>
        </li>
    </ul>
</body>
</html>