由于溢出属性,CSS下拉菜单没有显示
CSS dropdown not showing due to overflow property
我现在正在制作一个Angular/Rails应用程序。我在屏幕顶部配置了一个标题,并在img上放置了一个下拉功能。我想让下拉菜单显示用户信息。比如谷歌。由于page-header
中的overflow: auto
的CSS属性,下拉框不显示。然而,我不能把这个属性拿出来,因为如果我把它拿出来,它会杀死头部的CSS。我怎么能覆盖它只是为dropdown
CSS?
以下是我的代码:
<header class="page-header page-header--fixed">
<a href="/" class="page-header-logo"><img src="/assets/logo-green.svg" alt="logo"></a>
<div class="dropdown">
<img src="/assets/user_icon.svg" alt="User" onclick="myFunction()">
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
</header>
CSS .page-header {
overflow: auto;
/*height:50px;*/
padding: 8px 20px;
background-color: #07b1d1;
box-shadow: 0 3px 17px 0 rgba(0, 0, 0, 0.1);
}
.page-header--fixed {
position: relative;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
background-color: white;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
z-index: 200;
display: none;
position: absolute;
background-color: #F5F8F9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
Javascript: function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
试试这个:
var x= document.getElementsByClassName("dropdown-content");
x.style.overflow= "auto";
将overflow:hidden
添加到.dropdown-content
类的css规则中。
.dropdown-content {
z-index: 200;
display: none;
position: absolute;
background-color: #F5F8F9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 0;
overflow:hidden;
}
相关文章:
- 如何将CSS(特别是填充/边距)应用于select下拉菜单的选项或optgroup
- 为什么引导程序下拉菜单只有在包含bootstrap-responsive.css时才起作用
- 自定义Jquery css下拉菜单问题
- 我的CSS/Javascript下拉菜单测试代码出了什么问题
- 使用 JavaScript CSS 的下拉菜单
- 特定的JavaScript函数,用于将CSS样式表与下拉菜单交换
- 如何在Dropkick插件的CSS中单独针对多个下拉菜单
- 未选择下拉菜单时更改css
- HTML、CSS、JS响应下拉菜单
- 下拉菜单、CSS、HTML和JavaScript:JavaScript使菜单跳转,无法正常工作
- 创建一个CSS下拉菜单,其中包含从搜索图标弹出的搜索框
- 移动设备上的CSS下拉菜单.如何四处走动:悬停
- jQuery下拉菜单和CSS媒体查询冲突
- 有没有办法在 css 中设计一个看起来完全是 html 下拉菜单的菜单
- 仅 CSS 的下拉菜单真的可行吗?
- 如何在我的网站上有多个手风琴下拉菜单.HTML,CSS JavaScript
- 如何或在哪里将javascript settimeout函数添加到CSS垂直下拉菜单
- 如何使用HTML制作下拉菜单&css
- 下拉菜单css扩展宽度基于内容
- jQuery下拉菜单CSS操作