title: css issue - drop-down not working correctly on iphone/ipad
body: <p>I have a css powered drop down menu which doesn't work properly on the iphone or ipad.</p>
  
  <p>It works as I want it to on all other browsers and devices I've checked. </p>
  
  <p>I've narrowed it down to the fact that I don't have the menu text (eg the word 'face') wrapped in href tags, like it does in the original version of the code. Thats what makes the difference. Wrap href tags around the word face and the drop down works OK on ipad/iphone</p>
  
  <p>Obviously I could just add the href and be done but I really don't want to have to, otherwise everyone with a touch-screen, who would normally have to tap the menu text to get the dropdown to appear, will be taken to wherever the link points. Spoiling the whole point of the dropdown in the first place!</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;div id="dropMenuWrapper"&gt;
    &lt;div id="dropMenu"&gt;
          &lt;ul class="level1"&gt;
          &lt;li class="submenu"&gt;Face
              &lt;ul class="level2"&gt;
                  &lt;li class="subCatodd"&gt;&lt;a href=""&gt;powder&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subCateven"&gt;&lt;a href=""&gt;cream&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The the css:</p>
  
  <pre><code>body {  behavior: url(includes/csshover.htc);}
  div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
  
  
  #dropMenuWrapper {
  width:100%;
  height:25px;
  margin:0;
  font-size:11px;
  }
  
  div#dropMenu {
  width:750px;
  margin:0 auto;
  text-align:center;
  z-index:1000;
  position:relative;
  }
  
  div#dropMenu ul {
  margin: 0; 
  padding: 0;
  }
  
  div#dropMenu li {
  position: relative; 
  list-style: none; 
  margin: 0; 
  float: left; 
  line-height: 1em;
  }
  
  div#dropMenu ul.level1 {
  width:750px; 
  margin:0 auto; 
  text-align:center;
  background:#4F4F4F;
  height:25px;
  z-index:1000;
  }
  
  div#dropMenu li:hover {}
  div#dropMenu li.submenu {}
  div#dropMenu li.submenu:hover {}
  div#dropMenu li a {display: block;text-decoration: none;} 
  div#dropMenu&gt;ul a {width: auto;}
  div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
  div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
  div#dropMenu li.submenu li.submenu {}
  div#dropMenu ul.level1 li.submenu:hover ul.level2, 
  div#dropMenu ul.level2 li.submenu:hover ul.level3,
  div#dropMenu ul.level3 li.submenu:hover ul.level4,
  div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
  div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
  div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#4f4f4f}
  div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
  div#dropMenu ul.level2 a:hover {color:#4f4f4f;}
  </code></pre>
  
  <p>And for ease a jsfiddle: <a href="http://jsfiddle.net/VvT6Y/1/" rel="nofollow">http://jsfiddle.net/VvT6Y/1/</a></p>
  
  <p>Can anyone point out a way to get the dropdown working on iphone/ipad without having to make the text a link?</p>
  
  <p>Thanks in advance :)</p>