Responsive Menu - Prevent a hover, Use a click instead

Question

I have built a responsive menu for a site I've been working on.

The problem I am having is on an iPhone and all iOS devices, If the ul has a child, It is treating that as an hover and making the menu completley unusable.

I am using Drop-Down Menu Navigation: Touch Friendly

I have created a jsFiddle

My CSS :

 #nav
{
    margin-top: 35px;
    margin-bottom: 10px;
}

#nav > a
{
    display: none;
}

#nav li
{
    position: relative;
    list-style: none;
    line-height: 54px;
}

#nav li a
{
    font-size: 16px;
    color: #424242;
    padding-bottom: 2px;
    display: block;
}

#nav li a:hover {
    color: #c55102;
}

/* first level */

#nav > ul
{
    position: relative;
}

#nav > ul > li
{
    height: 100%;
    float: left;
    list-style: none;
    display: inline;
    margin-right: 30px;
    position: relative;
}

#nav > ul > li:hover {
    background: url(../img/icons/icon-nav-arrow.png) no-repeat bottom;
}

#nav ul li:last-child {
    margin-right: 0;
}

#nav ul li.current_page_item a {
    color: #c55102;
    border-bottom: 2px solid #c55102;
}

#nav li.current_page_item ul li a {
    border-bottom: none;
}

#nav > ul > li > a
{
    font-size: 14px;
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
    text-decoration: none;
}


/* second level */

#nav li ul
{
    background-color: #D1D1D1;
    display: none;
    position: absolute;
    top: 100%;
    width: 300px;
    z-index: 99999;
}

#nav li ul li {
    border-bottom: 1px solid #c55102;
    line-height: 40px;
}

#nav li ul li a {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
    color: #424242 !important;
}

#nav li ul li:last-child {
    border-bottom: none !important;
}

#nav li:hover ul
{
    display: block;
    left: 0;
    right: 0;
}

#nav li:not( :first-child ):hover ul
{
    left: -15px;
}

#nav li ul a:after {
    content: "";
}

#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
    text-decoration: none;
}


@media only screen and ( max-width: 800px )
{
    #nav
    {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
    }

    #nav > a
    {
        background: url(../img/icons/icon-nav.png) no-repeat 2% center #D1D1D1;
        width: 100%;
        height: 3.125em; /* 50 */
        text-align: left;
        text-indent: 55px;
        margin-bottom: 10px;
        color: #424242;
        text-transform: uppercase;
        line-height: 40px;
        position: relative;
    }

    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
        display: block;
    }


    /* first level */

    #nav > ul
    {
        background: #D1D1D1;
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        margin-top: -10px;
    }

    #nav ul li.current_page_item a {
        border-bottom: 1px solid #c55102;
    }

    #nav ul li:last-child {
        border-bottom: none;
    }

    #nav li a:after {
        content: "";
    }

    #nav li ul {
        width: 100%;
    }

    #nav li ul li {
        border-bottom: none;
        padding-left: 0;
    }

    #nav:target > ul
    {
        display: block;
        position: relative;
    }

    #nav > ul > li
    {
        display: block;
        width: 100%;
        float: none;
    }

    #nav > ul > li > a
    {
        height: auto;
        text-align: left;
        border-bottom: 1px solid #c55102;
        padding: 0 0.833em; /* 20 (24) */
    }

    #nav > ul > li:not( :last-child ) > a
    {
        border-right: none;
    }

    /* second level */

    #nav li ul
    {
        position: static;
        padding: 1.25em; /* 20 */
        padding-top: 0;
    }
}

Is there any way when the navigation is hovered (On a small screen device) that it takes a click to open its sub menu? I am willing to do this in CSS or jQuery, Whatever is required.

Thanks

Answer 1

DO NOT change <a> behavior. <a> should be always used to redirect you to a page when clicked, not to expand child <ul>. Create a button or anything next to <a> which has absolute/relative position against the <li> and make sure it has decent padding and higher z (than <a>) for easier click. This button will be the trigger for expanding it parent's li child ul.

After that :

$(".button").click(function(){
  $(this).next('ul').css('display','block');
});

This will make any click made to the button will expand the <ul>

As for "only make it to do so on smaller screen" just hide those button on larger screen

I will edit your fiddle later for this solution's implementation

---

update

here is the fiddle, sorry, I decided to create it from scratch rather than editing to keep it simple. Resize the result window smaller to make the button appear. otherwise, the button is hidden and default hover action is still being used. hope it helps :)