Stop CSS dropdown Menu stretching the navigation bar's height?

Question

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 dropdown menu stretches the navigation bar's height. I would like to fix this issue as I don't wish the dropdown menu to have any effect on the navigation bar's height. Currently, using z-index is not making the drop down menu pop out either. Example Below:

Before Hover - http://imgur.com/SNyEPYp

During Hover - http://imgur.com/DJD55nu

(The black line is the bottom of the navigation bar)

Any help would be amazing - thank you!!

application.html.erb

<ul class="navigation-bar">

  <div class="navigation-bar-right-inset">

    <li class="navigation-bar-right"> <span class="settings"> <a href="#"> <img class="#" src="/assets/settings.svg"> </a> </span>
      <ul class="dropdown">
        <li> <%= link_to "sign out", destroy_user_session_url, method: :delete %> </li>
        <li> <%= link_to "profile", edit_user_registration_path %> </li>
      </ul>
    </li>

  </div>

</ul>

CSS Stylesheet

.navigation-bar {
  width: 100%;
  top: 0;
  position: fixed;
  z-index: 1050;
  list-style-type: none;
  overflow: hidden;
  background-color: rgb(251,251,251); 
  border-bottom: 1px solid #FFF;
}

.navigation-bar-right-inset { margin-right: 9%; }

.navigation-bar-right { float: right; }

.navigation-bar-right .settings img { 
  height: 65px; 
  margin-top: -5px;
  opacity: 0.3;
}

.navigation-bar-right .settings img:hover { opacity: 0.5 }

ul li .dropdown {
  display: none;
  position: relative;
  width: auto;
}

ul li:hover .dropdown { display:block }

Answer 1

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;
}

Answer 2

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/