title: ReactJS multi level dropdown menu
body: <p>I'm trying to build a multi level ReactJs dropdown menu. I'm using the following post/code as base:<a href="https://stackoverflow.com/a/6540748/2697571">the following post</a> and <a href="http://jsfiddle.net/Dg3yQ/29/" rel="nofollow noreferrer">this jsfiddle code</a> as starting point of my ReactJs component:</p>
  
  <pre><code>class DropdownMenu extends Component {
    static propTypes = {
      config: PropTypes.array.isRequired
    };
  
    getMenuItemTitle = (menuItem, index, depthLevel) =&gt; {
      return menuItem.title;
    };
  
    getMenuItem = (menuItem, depthLevel, index) =&gt; {
      let title = this.getMenuItemTitle(menuItem, index, depthLevel);
  
      if (menuItem.submenu &amp;&amp; menuItem.submenu.length &gt; 0) {
        return (
          &lt;li&gt;
            {title}
            &lt;DropdownMenu config={menuItem.submenu} submenu={true} /&gt;
          &lt;/li&gt;
        );
      } else {
        return &lt;li&gt;{title}&lt;/li&gt;;
      }
    };
  
    render = () =&gt; {
      let { config } = this.props;
  
      let options = [];
      config.map((item, index) =&gt; {
        options.push(this.getMenuItem(item, 0, index));
      });
  
      if (this.props.submenu &amp;&amp; this.props.submenu === true)
        return &lt;ul&gt;{options}&lt;/ul&gt;;
  
      return &lt;ul className="dropdown-menu"&gt;{options}&lt;/ul&gt;;
    };
  }
  
  export default DropdownMenu;
  </code></pre>
  
  <p>CSS file:</p>
  
  <pre><code>.dropdown-menu {
      height: 35px;
      list-style: none;
      margin: 0;
      padding: 0;
      float: left;
      text-align: center;
  }
  
  .dropdown-menu li {
      display: inline-block;
      position: relative;
      float: left;
  }
  
  .dropdown-menu li a {
      display: inline-block;
      width: 200px;
      line-height: 35px;
      text-decoration: none;
  }
  
  .dropdown-menu li li a {
      font-size: 12px;
  }
  
  .dropdown-menu li:hover {
      background: blue;
  }
  
  /*--- Sublist Styles ---*/
  .dropdown-menu ul {
      position: absolute;
      display: none;
  }
  
  /*--- Hide Sub Sublists ---*/
  .dropdown-menu li:hover ul ul {
      display: none;
  }
  
  /*--- Sublevel UL's display and position on hover ---*/
  .dropdown-menu li:hover ul {
      display: block;
  }
  .dropdown-menu li li:hover ul {
      margin-left: 200px;
      margin-top: -35px;
      display: block;
  }
  nu-li {
      padding: 10px;
  }
  
  .dropdown-submenu {
      position: absolute;
      left: 0px;
      top: 0px;
  }
  </code></pre>
  
  <p>And finally my configuration file:</p>
  
  <pre><code>  "navItems": [
      {
        "title": "Option 1",
        "submenu": null
      },
      {
        "title": "Option 2",
        "submenu": [
          {
            "title": "Option 2.1",
            "submenu": [
              {
                "title": "Option 2.1.1",
                "submenu": null
              },
              {
                "title": "Option 2.1.2",
                "submenu": null
              }
            ]
          },
          {
            "title": "Option 2.2",
            "submenu": [
              {
                "title": "Option 2.2.1",
                "submenu": null
              },
              {
                "title": "Option 2.2.2",
                "submenu": null
              }
            ]
          }
        ]
      }
    ]
  </code></pre>
  
  <p>I'm getting a messy menu, with options above other options and I'm sure I'm missing something simple. </p>
  
  <p>How can I turn my component in a real multi level dropdown menu?</p>