title: CSS dropdown menu to open on click and/or on hover for iOS
body: <p>I have a CSS dropdown list that opens on hover, which creates a problem when somebody is using an iOS device like an iPad or iPhone.  I created a rough jFiddle here:</p>
  
  <p><a href="http://jsfiddle.net/7vtWy/1/" rel="nofollow">http://jsfiddle.net/7vtWy/1/</a></p>
  
  <p>If I use an Android device with chrome, it works great...clicking the main menu item brings up the dropdown list.  On iOS, nothing.  Is there a way that I can make it so that if there is a mobile device, the dropdown will display on main menu click since there is no such thing as hover?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header&gt;        
  &lt;nav role="navigation" class="clearfix"&gt;
          &lt;ul id="nav-site"&gt;
              &lt;li&gt;
                  &lt;span class="arrow"&gt;Shop&lt;/span&gt;
                  &lt;div class="dropdown_1column"&gt;
                      &lt;div class="mainbox clearfix"&gt;
                          &lt;ul&gt;
                              &lt;li class="main-category"&gt;&lt;a href="new-products/"&gt;New Arrivals&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="main-category"&gt;&lt;a href="gifts-under-100/"&gt;Gifts Under $100&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="main-category"&gt;&lt;a href="staff-favorites/"&gt;Staff Favorites&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="main-category"&gt;&lt;a href="made-in-the-usa/"&gt;Made in the USA&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>header nav { text-transform: uppercase; width: 980px; font-weight: 700; font-size: 15px;}
  header nav a { color: #000; text-decoration: none; }
  header nav li { float: left; display: block; position: relative; z-index: 999; }
  
  header nav #nav-site { float: left; }
  header nav #nav-site li { padding: 0 10px 3px 0; }
  header nav .arrow:hover { cursor: pointer; }
  header nav #nav-account { float: right; }
  header nav #nav-account li { margin: 0 0 3px 10px; }
  header nav #nav-account .cart span { font-weight: 400; font-size: 11px; padding: 2px 4px; display: block; position: absolute; top: 01px; left: 48px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #edeb2b; display: block; }
  header nav #nav-account .cart span:hover { background: #f6f6f6; }
  
  header nav .dropdown_1column { position: absolute; left: -999em; width: 980px; font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 1px; }
  header nav li:hover .dropdown_1column {left: auto; top: auto; }
  header nav .dropdown_1column .mainbox { background: #edeb2b; border: 4px solid #000; }
  header nav .dropdown_1column ul { width: 161px; float: left; letter-spacing: 0; height: 235px; border-right: 1px solid #d4d220; }
  header nav .dropdown_1column ul.last { border: none; }
  header nav #nav-site .dropdown_1column li { float: none; margin: 0; font-size: 12px; }
  header nav #nav-site .dropdown_1column li.main-category { font-weight: 700; text-transform: uppercase; font-size: 13px; }
  header nav .dropdown_1column a { display: block; padding: 5px 10px; }
  header nav .dropdown_1column a:hover { background: #d4d220; }
  header nav #nav-site .dropdown_1column .popular { padding: 10px; }
  header nav .dropdown_1column .popular a { display: inline; padding: 0; }
  header nav .dropdown_1column .popular a:hover { background: #d4d220; }
  header nav .dropdown_1column li.main-category a:hover { background: none; color: #363636; }
  
  header nav .dropdown_1column_right { position: absolute; left: -999em; font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 1px; }
  header nav .dropdown_1column_right span { position: absolute; right: 10px; padding: 0 4px; background: #d4d220; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
  header nav li:hover .dropdown_1column_right {left: auto; right: -49px; top: auto; }
  header nav .dropdown_1column_right ul {letter-spacing: 0; background: #edeb2b; border: 4px solid #000; width: 175px; }
  header nav #nav-account .dropdown_1column_right li { float: none; margin: 0; }
  header nav .dropdown_1column_right a { display: block; padding: 5px 10px; }
  header nav .dropdown_1column_right a:hover { background: #d4d220; }
  </code></pre>