CODEWITHSUNDEEP
htmlioscss
Julian Asaka Gray
Julian Asaka Gray

Reputation: 11

:Hover Css Menu doesn't open on iOS Safari ONLY.

Im having a bizarre problem. On one of the sites im coding, I use css hover commands to attach pull down menus to buttons. As many of you know, on mobile devices, hover commands translate to taps. The problem is that whatever I do, I cannot get iOS safari to register a click, making the entire drop down menu inaccessible on iOS safari ONLY. It works in chrome on iphone, and it works on every desktop browser. Any ideas?

This is my CSS:

/* Reserve Pull Down */

.reserve {
    font-size: 30px;
    color: white;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 30px;
}

.reservetitle{
    color: white;
}

.reservedropdown {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
}

.reserve:hover .reservedropdown {
    display: block;
}

.reserve.active  .reservedropdown {
    display: block;
}

/* Reserve Pull Down End */

And this is my html....

<div class="reserve">  
        <a class="reservetitle">Reserve</a>
            <div class="reservedropdown">
                <a class="dropdowntext" href="reserve/index.html">By Location</a>
                <div class="dropdowngap"></div>
                <a class="dropdowntext" href="tel:+13014333005">Call Now</a>
            </div>
        </div>

Any ideas? Im having a very hard time figuring it out. Ive tried ":active", ":focus". and of course, ":hover". Cant get anything to work on iOS safari. Any help would be appreciated. Cheers! -Julian

Upvotes: 1

Views: 940

Answers (1)

bjornmeansbear
bjornmeansbear

Reputation: 98

I was able to get it to work by tweaking your HMTL slightly

http://codepen.io/bjornmeansbear/pen/wGdzMg

I simply made sure that the <a class="reservetitle">Reserve</a> had an href="" … <a href="#" class="reservetitle">Reserve</a>

The browser for sure sees it as a link that you would click/hover on, and everything then works fine.

Upvotes: 1

Related Questions