title: CSS Drop down menu that will work on mobile
body: <p>Wondering if anyone has a drop down menu solution that will work on mobile. The plan is to eventually redo this whole site to make it mobile friendly, but it's currently not and the drop downs aren't working on mobile. You can't select any of the links, parent or child. Live site can be seen at www.cabletv.com</p>
  
  <p>Shortened version of HTML:</p>
  
  <pre><code>&lt;ul id='nav'&gt;
  &lt;li&gt;&lt;a href='/digital-cable' id='tv'&gt;TV&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href='/comcast/cable-tv'&gt;Comcast&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='/charter/cable-tv'&gt;Charter&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='/cox/cable-tv'&gt;Cox&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='/time-warner/cable-tv'&gt;Time Warner&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href='/internet' id='internet'&gt;Internet&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href='/comcast/internet'&gt;Comcast&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='/charter/internet'&gt;Charter&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='/cox/internet'&gt;Cox&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='/time-warner/internet'&gt;Time Warner&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul#nav{position: absolute; top: 0px; right: 0px;  margin: 0px; padding: 0px;}
  ul#nav li {display: block; float: left; position: relative; margin: 0px; padding: 0px;}
  ul#nav li a{display: block; float: left; height: 67px; font-size: 14px; text-transform: uppercase; color: #5d5d5d; text-decoration: none; padding: 13px 0px 0px; background: url(../images/cabletv/new/generic/nav-sprites.png) no-repeat 0px 0px; text-align: center; position: relative; border-top: 5px solid #fff;}
  
  ul#nav li:hover{background-color: #f2f2f2;}
  ul#nav li a:hover, ul#nav li:hover a {border-color: #f2f2f2;}
  
  ul#nav,ul#nav li,ul#nav ul { list-style: none; margin: 0; padding: 0;}
  
  ul#nav li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; position: relative;}
  
  ul#nav li.hover,ul#nav li:hover { position: relative; z-index: 599; cursor: default;}
  
  ul#nav ul { visibility: hidden; position: absolute; top: 100%; left: -40px; z-index: 598; width: 470px; background: rgba(255,255,255,0.9); -webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding-left: 30px;}
  
  ul#nav ul li { display: block; float: left;}
  ul#nav ul li:hover{background: none;}
  ul#nav ul li a, body._404 ul#nav ul li a{background: none; display: block; float: left; height: auto; padding: 15px 25px; text-transform: none; border: none;}
  ul#nav ul li a:hover{background: none; color: #ff6947;}
  ul#nav ul ul { top: 1px; left: 99%;}
  ul#nav li:hover &gt; ul { visibility: visible;}
  ul#nav li.rtl ul { top: 100%; right: 0; left: auto;}
  ul#nav li.rtl ul ul { top: 1px; right: 99%; left: auto;}
  </code></pre>