Atlaskit ReactJs Library DropdownItem list is showing under app bar

Question

My DropdownItem lists positions are showing under my app bar, which is creating problem. How could I show the DropDownItem lists over the app bar of my component? My current code is as below:

  <DropdownMenu trigger="User Base" >
                  <DropdownItemRadioGroup id="user_base">
                    <DropdownItemRadio
                      id="Total Base" defaultSelected
                    >
                      Total Base
                    </DropdownItemRadio>
                    <DropdownItemRadio
                      id="APP User"
                    >
                      App User
                    </DropdownItemRadio>
                    <DropdownItemRadio
                      id="USSD User"
                    >
                      USSD User
                    </DropdownItemRadio>
                    <DropdownItemRadio
                      id="EC Verified"
                    >
                      EC Verified
                    </DropdownItemRadio>
                    <DropdownItemRadio
                      id="new-user"
                    >
                      New User
                    </DropdownItemRadio>
                    <DropdownItemRadio
                      id="Self Registration"
                    >
                      Self Registration
                    </DropdownItemRadio>
                    <DropdownItemRadio
                      id="monthly-active"
                    >
                      Monthly Active
                    </DropdownItemRadio>
                  </DropdownItemRadioGroup>
                </DropdownMenu>

Answer 1

Create a css class named as : style.css

div.css-xqfi6p {
margin-top: 8px;
}