停止CSS下拉菜单拉伸导航栏的高度？ [英] Stop CSS dropdown Menu stretching the navigation bar's height?

问题描述

我正尝试在我的导航栏中创建一个CSS下拉菜单，当用户将鼠标悬停在设置图标上时，该菜单就会出现。然而，当用户将鼠标悬停在设置图标上时，下拉菜单会拉伸导航栏的高度。我想解决这个问题，因为我不希望下拉菜单对导航栏的高度有任何影响。目前，使用z-index不会使下拉菜单弹出。示例如下：

悬停前 - http://imgur.com/ SNyEPYp

在悬停期间 - http：// imgur。 com / DJD55nu

（黑线是导航栏的底部）

任何 的帮助都很棒 - 谢谢！

$ b

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> < /跨度> 
< ul class =dropdown> 
< li> <％= link_to注销，destroy_user_session_url，方法:: delete％> < /锂> 
< li> <％= link_to个人资料，edit_user_registration_path％> < /锂> 
< / ul> 
< / li> 
 
< / div> 
 
< / ul> 
  

CSS样式表

  .navigation-bar {
 width：100％; 
 top：0; 
位置：固定; 
 z-index：1050; 
 list-style-type：none; 
 overflow：hidden; 
 background-color：rgb（251,251,251）; 
 border-bottom：1px solid #FFF; 
} 
 
。导航栏右键{margin-right：9％; } 
 
 .navigation-bar-right {float：right; } 
 
。导航栏右键.settings img {
 height：65px; 
 margin-top：-5px; 
不透明度：0.3; 
} 
 
 .navigation-bar-right .settings img：hover {opacity：0.5} 
 
 ul li .dropdown {
 display：none; 
职位：亲属; 
 width：auto; 
 
 $ b $ li li：hover .dropdown {display：block} 
  

解决方案

这个如何：

  ul li .dropdown {
显示：无; 
位置：绝对; 
 width：auto; 
 top：50px; //根据需要修改
右：0; //根据需要修改
} 
  

同时删除 overflow：hidden 来自 .navigation-bar ，因为这隐藏了下拉菜单。 $ b https://jsfiddle.net/8nmtbv5g/

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 }

解决方案

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/

这篇关于停止CSS下拉菜单拉伸导航栏的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！