I'm currently working on integrating a CSS dropdown menu into my navigation bar that will only appear when a user hovers over the settings icon.
However, I've encountered an issue where hovering over the settings icon causes the dropdown menu to stretch the height of the navigation bar. My goal is to resolve this issue so that the dropdown menu does not affect the navigation bar's height in any way. So far, using z-index hasn't helped make the dropdown menu visually pop out either. Here are some visual examples:
Before Hover -
During Hover -
(The black line indicates the bottom of the navigation bar)
Any assistance would be greatly appreciated - 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 }