title: close button for JS dropdown menu on tablets/phones?
body: <p>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.</p>
  
  <p>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?</p>
  
  <pre><code>    /* 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&gt;a{ 
          }
          .horizontal ul li a.first{  
          }
          .horizontal ul li li a.first{
          }
          .horizontal ul li li:first-child&gt;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&gt;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&gt;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;
          }
  
  
  
  
  
  
  
  &lt;div id="dropdown" class="mlmenu horizontal bluewhite blindv plus inaccessible delay"&gt;
  
      &lt;ul&gt;
                  &lt;li&gt;Menu Link&lt;/li&gt;
  
                        &lt;ul&gt; &lt;li&gt;test&lt;/li&gt;  &lt;/ul&gt;
  
          &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>