title: React Bootstrap dropdown menu styling problem
body: <p>I have created a bootstrap dropdown menu in my react application.
  The dropdown code is looks like this.</p>
  <pre><code>&lt;Dropdown className=&quot;drop&quot;&gt;
                   &lt;Dropdown.Toggle variant=&quot;success&quot; id=&quot;dropdown-basic&quot;&gt;
                       Dropdown Button
                   &lt;/Dropdown.Toggle&gt;
                   &lt;Dropdown.Menu  className=&quot;dropMenu&quot;&gt;
                       &lt;Dropdown.Item href=&quot;#/action-1&quot;&gt;Action&lt;/Dropdown.Item&gt;
                       &lt;Dropdown.Item href=&quot;#/action-2&quot;&gt;Another action&lt;/Dropdown.Item&gt;
                       &lt;Dropdown.Item href=&quot;#/action-3&quot;&gt;Something else&lt;/Dropdown.Item&gt;
                       &lt;Dropdown.Item href=&quot;#/action-1&quot;&gt;Action&lt;/Dropdown.Item&gt;
                       &lt;Dropdown.Item href=&quot;#/action-2&quot;&gt;Another action&lt;/Dropdown.Item&gt;
                       &lt;Dropdown.Item href=&quot;#/action-3&quot;&gt;Something else&lt;/Dropdown.Item&gt;
                   &lt;/Dropdown.Menu&gt;
               &lt;/Dropdown&gt;
  </code></pre>
  <p>Here are the css styles I have applied for this.</p>
  <pre><code>.drop{
      position: relative;
      display: inline-block;
  }
  .dropMenu{
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 112px 160px;
      z-index: 1;
      height: auto;
  }
  .drop:hover .dropMenu {
      display: inline-block;
  }
  </code></pre>
  <p>But when I hover over on the button It shows a something like this.
  <a href="https://i.stack.imgur.com/glXKm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/glXKm.png" alt="Imge of the UI " /></a></p>
  <p>How Can i get these items as a list.</p>