Question

I’ve been using the following CSS dropdown box on my website, and I’ve noticed that when you click to activate the dropdown on an ipad/iphone, there is no way to close the dropdown menu other than refreshing the page.

Is there a JS code that I can add to the bottom of the dropdown box for tablet/phone users so they can close the box if they don’t make a selection?

    /* css */

    #dropdown {

    }
    #dropdown ul {


    }
    #dropdown li {

    }
    .dropmain1 {
        background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
        width: 98px;
        border-left: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
                margin-top: 10px;   

        -moz-box-shadow: 3px 9px 8px #888;

    -webkit-box-shadow: 3px 9px 8px #888;

    box-shadow: 3px 9px 8px #888;

        }

    .dropmain2 {
        background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
        border-left: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
        -moz-border-radius-bottomleft: 7px;
        -moz-border-radius-bottomright: 7px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        padding: 5px;
        -moz-box-shadow: 3px 5px 8px #888;
        -webkit-box-shadow: 3px 5px 8px #888;
        box-shadow: 3px 5px 8px #888;
    }

    #drop2 {  width: 633px;     margin-top: 10px;       padding: 9px; }
    #drop3 {  width: 200px;     margin-top: 10px;       padding: 9px;  }
    #drop4 {  width: 200px;     margin-top: 10px;       padding: 9px; }
    #drop5 {  width: 200px;     margin-top: 10px;       padding: 9px; }


        /*this is the css for the horizontal version*/
        .horizontal ul{
            border: none;
            list-style-type: none;
            padding:0;margin:0;
        }
        .horizontal ul li{
            float: left;
            position: relative;
            margin:0;padding:0;
        }
        a.toplevel {
            display: block;
            color: #525252;
            text-decoration: none;
            overflow: hidden;
            display:inline-block;
            padding-left:15px;
            padding-right: 15px;
            line-height:18px;
            background:transparent url(images/misc/menu_open.gif) center left no-repeat;

        }
        .horizontal li li{
            float: none;
            margin-bottom: -1px;
        }
        .horizontal li li.last{
            border-bottom: none;
        }
        .horizontal ul li ul{
            position: absolute;
            top: 1.3em;
            left: -1px;
        }
        .horizontal ul ul ul{
            width: 130px;
            top: -1px;
            left: 128px;
            margin-top: 0;
        }
        .horizontal.left ul ul ul,.horizontal .left ul ul{
            top: -1px;
            left: -128px;
        }
        .horizontal ul li li a{
            padding: 12px;

        }
        .horizontal ul li:first-child>a{ 
        }
        .horizontal ul li a.first{  
        }
        .horizontal ul li li a.first{
        }
        .horizontal ul li li:first-child>a{  
        }
        div.horizontal ul li.pixelfix ul{
            left: 0;
        }
        div.horizontal ul li.pixelfix ul ul{
            left: 128px;
        }
        /*here we use a little CSS to make a basic/backup dropdown menu in modern browsers *cough* not IE6 or less *cough* if javascript is disabled.Flickering never happens in these browsers*/
        .mlmenu li ul{
            display: none;
        }
        .mlmenu li:hover>ul{
            display: block;
        }
        /*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
        .accessible li ul{
            display: block;
        }
        /*Code to show an element has a child*/
        .mlmenu.plus li a:first-child:not(:last-child):after{
            content: ' ';
        }
        .plus a span{
            padding-left: .5em;
        }
        .noshow{
            visibility: hidden;
        }
        /*colors for menu*/

        }
        .bluewhite li a{
            background-color: ;
            color: #ffffff;
        }
        .bluewhite li a:hover,.bluewhite li a.first:hover,.bluewhite .trail a.hover{

            /* HOVER */
        }
        .bluewhite li:first-child>a:hover{

        }
        .bluewhite ul{
            border-color: #000033;
        }






        #ldrop a:link, #ldrop a:visited {


        }
        #ldrop a:hover, #ldrop a:active {


        }


        #holdjump1 {
            padding-left: 8px;  padding-bottom: 6px;
        }
        #holdjump1 div {
        }
        #holdjump1 a:link, #holdjump1 a:visited {
            padding: 2px 0 2px 3px; margin:0;
        }
        #holdjump1 li {
            padding:0; margin:0;
        }



        .fjl {
            display: inline-block; 
            border-bottom: 1px dotted #c1c1c1; 
            width:30%; 
            margin: 0 5px 0 5px; 
            padding: 2px;
            font-size: 12px; 
            font-weight: normal;
        }
        .fjl a:link, .fjl a:visited {
        display: block;
        }
        .fjl a:active, .fjl a:hover {
        background: #a1a1a1;
        text-decoration: none;
        color: #ffffff;
        }







<div id="dropdown" class="mlmenu horizontal bluewhite blindv plus inaccessible delay">

    <ul>
                <li>Menu Link</li>

                      <ul> <li>test</li>  </ul>

        </ul>

</div>

Answer 1

oops!, I just noticed I had posted the wrong “order” of the ul list.

I posted
$(‘div#dropdown ul li’).click

when it actually should be

$(‘div#dropdown li ul’).click or
$(‘div#dropdown li ul li’).click

What I previously posted was for the main links to be opened and closed. The new method I am posting will open close the sub menu. UL inside of the LI. To add more submenu functioning, just keep adding on to the element.

$('div#dropdown li ul // 1-level drop down
$('div#dropdown li ul li ul // 2-level drop down
$('div#dropdown li ul li ul li ul // 3 level drop down.

Or you could just create classes for each level. Example

instead of a 2-level drop being
$(‘div#dropdown li ul li ul

you could just do something like this >>

Example menu with a 2-level sub menu

<ul>
   <li>link1<ul class="sub1">
   <li>sublink1-1<ul>
   <li>sub-sublink1-1</li>
   <li>sub-sublink1-2</li></ul></li></ul></li>
</ul>

Jquery

<script>
$(document).ready(function() {
    $('ul.sub1').click(function() {
    $(this).slideToggle();

  });
});
</script>

That would cause the 2nd level sub menus to slide up or slide down on click, thus “showing” and “hiding”.

Hope this helped a little more!