Question

我正在尝试在导航栏中创建一个CSS下拉菜单，当用户将鼠标悬停在设置图标上时会出现该菜单。

但是，当用户将鼠标悬停在设置图标上时，下拉菜单会拉伸导航栏的高度。我想解决这个问题，因为我不希望下拉菜单对导航栏的高度产生任何影响。目前，使用z-index不会使下拉菜单弹出。示例如下：

（黑线是导航栏的底部）

任何帮助都会很棒 - 谢谢!!

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样式表

.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

请使用此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

这个怎么样：

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

还从overflow:hidden移除了.navigation-bar，因为这隐藏了下拉菜单。

https://jsfiddle.net/8nmtbv5g/

停止CSS下拉菜单拉伸导航栏的高度？

2 个答案: