我正在尝试在我的导航栏中创建一个 CSS 下拉菜单,当用户将鼠标悬停在设置图标上时会出现该菜单。
但是,当用户将鼠标悬停在设置图标上时,下拉菜单会拉伸(stretch)导航栏的高度。我想解决这个问题,因为我不希望下拉菜单对导航栏的高度有任何影响。目前,使用 z-index 也不会弹出下拉菜单。示例如下:
悬停前 - http://imgur.com/SNyEPYp
在悬停期间 - http://imgur.com/DJD55nu
(黑线是导航栏的底部)
任何帮助都会很棒 - 谢谢!
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 }
最佳答案
这个怎么样:
ul li .dropdown {
display: none;
position: absolute;
width: auto;
top: 50px; //amend as needed
right: 0; // amend as needed
}
还从 .navigation-bar
中删除了 overflow:hidden
,因为它隐藏了下拉菜单。
关于jquery - 停止 CSS 下拉菜单拉伸(stretch)导航栏的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35990088/