title: CSS dropdown menu - mobile support
body: <p>I have constructed this relatively simple drop-down menu using CSS. I am worried about whether all devices treat touch events the same - i.e. do all touch devices have a cursor that is moved after a touch? I don't have neither the time or resource to test this, so my best bet is asking here.</p>
  
  <p><a href="http://jsfiddle.net/e1zkksgv/" rel="nofollow">Here</a> is an example, I would like to ask if this method of activating the drop-down will work on <em>most</em> mobile devices?</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="userpanel dropdown last-vertical"&gt;   &lt;span&gt;User Name&lt;/span&gt;
  
          &lt;ul class="userpanel dropdown-body"&gt;
              &lt;li&gt;&lt;a class="dropdown-item" href="/users/view"&gt;
                              &lt;i class="fa fa-lg fa-user"&gt;&lt;/i&gt; Profile
                          &lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-item" href="/users/settings"&gt;
                              &lt;i class="fa fa-lg fa-cog"&gt;&lt;/i&gt; Settings
                          &lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;form action="/users/logout" method="POST"&gt;
                      &lt;button type="submit" class="dropdown-item"&gt;    &lt;i class="fa fa-lg fa-sign-out"&gt;&lt;/i&gt; Log out&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>ul {
      margin: 0;
      padding: 0;
  }
  .userpanel.dropdown {
      display: inline-block;
      position: relative;
      padding: 1.5rem;
      z-index: 10;
      border: solid transparent;
      border-width: 1px 1px 0 1px;
      cursor: default;
  }
  .userpanel.dropdown span {
      display: inline-block;
      vertical-align: middle;
  }
  .userpanel.dropdown .dropdown-item {
      display: block;
      text-align: left;
      color: black;
      border: none;
      background: none;
      padding: 1rem;
      margin: 0;
      width: 100%;
      box-sizing: border-box;
  }
  .userpanel.dropdown .dropdown-item:hover {
      background-color: lightgray;
  }
  .userpanel.dropdown-body li {
      margin:0;
  }
  .userpanel.dropdown:hover {
      background-color: #f1f1f1;
      border-color: lightgray;
      color: black;
  }
  .userpanel.dropdown:hover .dropdown-body {
      display: block;
  }
  .userpanel.dropdown-body {
      position: absolute;
      top: 4rem;
      left: 0;
      display: none;
      width: 100%;
      z-index: 10;
      border: solid lightgray;
      border-width: 0 1px 1px 1px;
      background: #f1f1f1;
  }
  </code></pre>