下拉菜单无法在ipad上点击

时间:2014-12-10 08:45:12

标签: css drop-down-menu touchscreen

我之前已经看过这个问题,但仍然无法解决。我有一个CSS下拉菜单,简单,没有js。这一切都适用于桌面上但在iPad上我有两个令人不安的问题。使用Chrome菜单下拉菜单但不可点击",在Safari中它甚至没有下降。

这是HTML:

<nav>
<a href="javascript:changelang('english')" class="langchange"><img src="graphic/de.png" alt="de" /></a>

    <ul>

        <li><a href="english/welcome.php">welcome</a></li>
        <li><a href="#">courses</a>
            <ul>
                <li><a href="english/bb.php">bareboat skipper</a></li>
                <li><a href="english/vhf.php">VHF operator</a></li>
                <li><a href="english/icc.php">ICC</a></li>
                <li><a href="english/prices.php">prices</a></li>
                <li><a href="english/coursebook.php">booking</a></li>
            </ul>
        </li><!--close the top of the dropdown-->


        <li><a href="#">charter</a>
            <ul>

                <li><a href="english/charterprices.php">prices</a></li>
                <li><a href="english/charterbook.php">booking</a></li>

            </ul>

        </li><!--close the top of the dropdown-->



        <li><a href="#">about us</a>
            <ul>
                <li><a href="english/boat.php">the boat</a></li>
                <li><a href="english/ow.php">ocean wind</a></li>
                <li><a href="english/y2k.php">yachting 2000</a></li>
                <li><a href="english/iyt.php">IYT</a></li>
                <li><a href="english/contact.php">contact</a></li>
            </ul>
        </li><!--close the top of the dropdown-->

        <li><a href="#">and more</a>
            <ul>
                <li><a href="english/downloads.php">downloads</a></li>
                <li><a href="english/links.php">links</a></li>
                <li><a href="english/other.php">other services</a></li>
                <li><a href="english/testimonial.php">testimonials</a></li>
                </ul>
        </li><!--close the top of the dropdown-->


        <li><a href="#">news</a>
            <ul>
                <li><a href="english/log.php">log</a></li>
                <li><a href="english/gallery.php">gallery</a></li>
                </ul>
        </li><!--close the top of the dropdown-->

        </ul>

</nav>

这里是CSS:

nav     {
    position: absolute;
    top: 80px;
    margin-left: 110px;
    width: 890px;
    }

nav > ul    {
    list-style: none; /*removes bullets*/
    float: left;
    position: relative;
    border-radius: 0px 0px 5px 5px;
    text-align: center;
    }

nav ul li   {
    float:left;
    margin-right:10px;
    position:relative;
    }

nav ul a    {
    display:block;
    width: 130px; /* spaces the menu items*/
    color:#ffcc66;
    text-decoration:none;
    }

nav ul ul   {
    background: rgba(0, 102, 204, 0.8);
    border-style: none solid solid solid;
    border-color: #ffcc66;
    list-style:none;  /*removes bullets*/
    position:absolute;
    left:-9999px;
    margin-left: 0em; /*remove the margins set in ul*/
    }

nav ul ul li    {
    padding: 1px;
    float:none;
    }

nav ul li:hover ul  {/* Display the dropdown on hover */
        left:0;
        }

nav ul li:focus ul  {/* Display the dropdown on hover */
        left:0;
        }

网站网址为www.oceanwind.ch

我很沮丧(对任何事物过敏都没有帮助),请帮我找一个解决方案。

约翰

0 个答案:

没有答案