Material-ui horizontal menu
<p>I'm trying to create a horizontal menu component from material UI but it seems I'm unable to as all the list items are wrapped inside a <code>&lt;div&gt;</code></p>

<p>The <a href="http://www.material-ui.com/#/components/menu" rel="nofollow noreferrer">docs</a> show a vertical menu list </p>

<p>What works is if I remove all the outer <code>divs</code> inside the span, and remove the <code>display: block</code>style applied to the span.</p>

<pre><code>&lt;div style="padding: 8px 0px;"&gt;
   &lt;div&gt;
      &lt;span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;"&gt;
         &lt;div&gt;
            &lt;div style="margin-left: 0px; padding: 16px; position: relative;"&gt;
               &lt;div&gt;Inbox&lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/span&gt;
   &lt;/div&gt;
   &lt;div&gt;
      &lt;span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;"&gt;
         &lt;div&gt;
            &lt;div style="margin-left: 0px; padding: 16px; position: relative;"&gt;
               &lt;div&gt;Starred&lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/span&gt;
   &lt;/div&gt;
   &lt;div&gt;
      &lt;span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;"&gt;
         &lt;div&gt;
            &lt;div style="margin-left: 0px; padding: 16px; position: relative;"&gt;
               &lt;div&gt;Sent mail&lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/span&gt;
   &lt;/div&gt;
   &lt;div&gt;
      &lt;span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;"&gt;
         &lt;div&gt;
            &lt;div style="margin-left: 0px; padding: 16px; position: relative;"&gt;
               &lt;div&gt;Drafts&lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/span&gt;
   &lt;/div&gt;
   &lt;div&gt;
      &lt;span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;"&gt;
         &lt;div&gt;
            &lt;div style="margin-left: 0px; padding: 16px; position: relative;"&gt;
               &lt;div&gt;Inbox&lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/span&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>