Stop CSS Dropdown Menu Stretching The Navigation Bar's Height?

I am trying to create a CSS dropdown menu in my navigation bar which appears when a user hovers over the settings icon. However, when a user hovers over the settings icon, the dro

Solution 1:

How about this:

ul li .dropdown {
 display: none;
 position: absolute;
 width: auto;
 top: 50px; //amend as needed 
 right: 0; // amend as needed
}

Also removed overflow:hidden from .navigation-bar as this was hiding the dropdown menu.

https://jsfiddle.net/8nmtbv5g/

Solution 2:

Please use this css

    ul li .dropdown {
  display: none;
  position: fixed;
  z-index:100;
  width: auto;
  background-color: rgb(231,231,231);
}



  .navigation-bar {
  width: 100%;
  top: 0;
  position: fixed;
  z-index: 90; //--- must be lower than ul li .dropdown 
  list-style-type: none;
  overflow: hidden;
  background-color: rgb(251,251,251); 
  border-bottom: 1px solid #FFF;
}