我正在尝试在我的网站顶部创建一个响应式导航菜单。我正在使用那个export class FormCurrentComponent implements OnInit, AfterViewChecked, AfterViewInit, AfterContentInit {
ngOnInit() {
$("label:contains('Old Content')").html('New content');
}
ngAfterViewChecked(): void {
$("label:contains('Old Content')").html('New content');
}
ngAfterViewInit(): void {
$("label:contains('Old Content')").html('New content');
}
ngAfterContentInit(): void {
$("label:contains('Old Content')").html('New content');
}
}
。它在移动设备上工作正常,因此我将跳过该部分,但是在桌面上的子菜单出现在我的下拉按钮的右侧。我该如何选择该子菜单到导航栏?
display: flex;
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#top-bar {
width: 100%;
height: 70px;
background-color: white;
z-index: 1;
}
#top-bar nav {
height: 70px;
}
#nav-buttons {
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: hidden;
height: 0px;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
nav #nav-buttons li {
list-style-type: none;
width: 100%;
background-color: black;
}
nav #nav-buttons li a {
display: block;
width: 100%;
line-height: 10.5vh;
text-align: center;
text-decoration: none;
color: white;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
}
@media only screen and (min-width: 20px) {/*768px ofc*/
/*=======Top bar for desktop======*/
#nav-buttons {
overflow: hidden;
}
#top-bar nav {
width: 75%;
float: right;
}
#top-bar nav #nav-buttons {
height: 70px;
flex-direction: row;
justify-content: space-evenly;
}
nav #nav-buttons li {
background-color: white;
}
nav #nav-buttons li a {
color: black;
line-height: 70px;
}
nav #nav-buttons li a:hover {
color: red;
transition: 0.45s;
}
.dropdown-title:hover+.dropdown-sub,
.dropdown-sub:hover {
cursor: pointer;
display: flex;
}
.dropdown-title:hover+.dropdown-option:hover {
background-color: #aaaaaa;
}
/*=======Top bar for desktop======*/
}
答案 0 :(得分:1)
您可以将position: relative
用于父级(子菜单触发器),将position: absolute
用于子级(子菜单)。我还删除了overflow: hidden
属性,并将其替换为overflow: visible
。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#top-bar {
width: 100%;
height: 70px;
background-color: white;
z-index: 1;
}
#top-bar nav {
height: 70px;
}
#nav-buttons {
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: hidden;
height: 0px;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
nav #nav-buttons li {
list-style-type: none;
width: 100%;
background-color: black;
}
nav #nav-buttons li a {
display: block;
width: 100%;
line-height: 10.5vh;
text-align: center;
text-decoration: none;
color: white;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
}
@media only screen and (min-width: 20px) {/*768px ofc*/
/*=======Top bar for desktop======*/
#nav-buttons {
overflow: visible;
}
#top-bar nav {
width: 75%;
float: right;
}
#top-bar nav #nav-buttons {
height: 70px;
flex-direction: row;
justify-content: space-evenly;
}
nav #nav-buttons li {
background-color: white;
}
nav #nav-buttons li a {
color: black;
line-height: 70px;
}
nav #nav-buttons li a:hover {
color: red;
transition: 0.45s;
}
.dropdown-title:hover+.dropdown-sub,
.dropdown-sub:hover {
cursor: pointer;
display: flex;
}
.dropdown-title:hover+.dropdown-option:hover {
background-color: #aaaaaa;
}
.dropdown {
position: relative;
}
.dropdown-sub {
position: absolute;
top: 100%;
left: 0;
}
/*=======Top bar for desktop======*/
}
<div id="top-bar">
<nav>
<ul id="nav-buttons">
<li><a href="#">Menu</a></li>
<li class="dropdown" style="background-color:#aaa;">
<a class="dropdown-title">Sub menu</a>
<ul class="dropdown-sub">
<li class="dropdown-option">option 1</li>
<li class="dropdown-option">option 2</li>
<li class="dropdown-option">option 3</li>
</ul>
</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</nav>
</div>