CODEWITHSUNDEEP
htmlcssmobile-safari
Spencer
Spencer

Reputation: 96

CSS dropdown not working on iOS Safari?

I have this navigation setup below with the CSS below that. I'm having issues with this navigation working within iOS Safari and I can't figure out why. It currently works perfectly fine in IE, Firefox and Chrome. The navigation looks fine on iOS but I can't get the dropdown to work in iOS at all.

Markup:

<nav>
    <ul>
        <li><a href="localhost">Home</a></li>
        <li class="dropdown">Nav One
            <ul class="drop-nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </li>
        <li class="dropdown">Nav Two
            <ul class="drop-nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS:

nav {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    margin: 40px 0 0;
    font-size: 12px;
}

.dropdown {
    text-transform: uppercase;
    font-family: "Montserrat",sans-serif;
    display: block;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    color: #423D39;
}

.dropdown:hover {
    color: #e16086;
}

.drop-nav {
    background: #D3AE95;
}

nav a {
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    color: #423D39;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.6s ease-in-out;
}

nav a:hover {
    color: #e16086;
}

nav ul li ul li {
    width: 160px;
    padding: 10px;
    font-size: 12px;
}

nav ul {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    list-style: none;
    margin: 0;
}

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}

nav ul li:hover > ul {
    display: block;
    border: 1px solid rgba(255,255,255,0.4);
}

nav li {
    position: relative;
    margin: 0;
    padding: 0 7px;
}

Thanks.

Upvotes: 1

Views: 1298

Answers (1)

Laurens
Laurens

Reputation: 124

It doesn't work because :hover effects can't directly be used on touch-devices.

A possible solution is to add a click event listener to the links, by adding this javascript (it uses jQuery, so make sure you include the jQuery library):

$(function() {
   $('nav > ul > li').on('click', function(){
       //
   });
});

This solution is, however, not very elegant and is not really user-friendly, because you can't close the subnav using this method. I'd recommend writing some custom javascript to make sure the navigation works with all user cases (e.g. tapping outside the navigation to close etc.)

Upvotes: 1

Related Questions