隐藏在主要内容下的导航栏下拉菜单
[英]Dropdown from navbar hidden under the main content
问题描述
I'm doing a website project, where I'm using Materialize framework. 
我正在做一个网站项目，正在使用Materialize框架。
Problem : 问题：
I have to make a navbar, where it should be able to let out a dropdown menu/submenu.
我必须制作一个导航栏，它应该能够显示下拉菜单/子菜单。 I think the main problem could be either on the overflow: or thez-index.我认为主要问题可能是overflow：或z-index。 Because of that, I've tried to test the overflow betweenauto,visible, etc. There are 2 observations that I got during my testing:因此，我试图测试auto，visible等之间的溢出。在测试过程中，我得到了两个观察结果：- Navbar dropdown menu came out perfectly, but got hidden behind the main content 导航栏下拉菜单显示完美，但隐藏在主要内容的后面
- Navbar dropdown came out perfectly on top of the main content, but resulting a large white space between the navbar and the main content. 导航栏下拉菜单完全位于主要内容的顶部，但在导航栏和主要内容之间产生了很大的空白。
- Navbar dropdown menu came out perfectly, but got hidden behind the main content
Can anyone points out what did I miss? 谁能指出我想念的是什么？ or what is wrong in my code, any help would be appreciated, thank you. 或我的代码有什么问题，我们将不胜感激，谢谢。
Here is my HTML: 这是我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="HandheldFriendly" content="true">
<title></title>
<!--CSS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<!-- Header -->
<nav id="navbar" class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.html" class="brand-logo">
<img src="images/logo_new.png" class="logosize" alt="logo">
</a>
<ul class="right hide-on-med-and-down">
<li>
<a class='dropdown-button' href='#' data-activates='architect'>Architect</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='interior'>Interior</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='commercial'>Commercial</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='test'>Office</a>
</li>
<li>
<a href="about.php">About Us</a>
</li>
<li>
<a href="contact.php">Contact Us</a>
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>
<a class="dropdown-button" href="#" data-activates="architect-mobile">Architect</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="interior-mobile">Interior</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="commercial-mobile">Commercial</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="test-mobile">Office</a>
</li>
<li>
<a href="about.php">About Us</a>
</li>
<li>
<a href="contact.php">Contact Us</a>
</li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
<!-- Info Page -->
<div class="container">
<div class="row">
<div class="col s12">
<!-- note: there is center before -->
<!-- <h3><i class="mdi-content-send brown-text"></i></h3> -->
<!-- Menu 1 -->
<div class="col s12 m5">
<p align="left">
<h3>
<b>Intimate House</b>
</h3>
<br> Project : Intimate House
<br>
<br> Location : Pulau Putri, Puri - West Jakarta - Indonesia
<br>
<br> Site Area : 160 sqm
<br>
<br> Building Area : 210 sqm
<br>
<br> Design Phase : 2016
<br>
<br> Construction Period : April 2016 - July 2017
<br>
<br>
</p>
<div class="textbox">
<p align="left">
<i>
Intimate House was built on a 8m x 20m land in West Jakarta. At first, it was a one story house with 2 bedrooms and 2 bathrooms.
It had a high ceiling, but lack of open space inside the house which make this house look
extremely dark, moist, and stuffy.</i>
<br>
<br>
</p>
<p align="right">
<i>
We transformed this house program by separating service area and private area. Furthermore private area is connected by a
connecting chamber in order to transform service area into private area which can be used
as a gathering room which is the main area in this Intimate House.</i>
<br>
<br>
</p>
<p align="left">
<i>
Living Room was designed to have natural air circulation and natural lighting. Both these natural element is obtained from
an open space next to Living Room, High Ceiling, and Skylight.</i>
<br>
<br>
</p>
</div>
</div>
<!-- Menu 2 -->
<div class="col s12 m7">
<div class="slider">
<ul class="slides">
<li>
<img src="images/architecture/intimate_house/1.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/3.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/4.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/5.jpg">
<!-- random image -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- Dropdown Menu -->
<div class="container_sub">
<div class="section">
<div class="row">
<!-- Architect -->
<ul id='architect' class='dropdown-content'>
<li>
<a href="project.html">Project one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<ul id='architect-mobile' class='dropdown-content'>
<li>
<a href="project.html">Project one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<!-- Interior -->
<ul id='interior' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<ul id='interior-mobile' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<!-- Commercial -->
<ul id='commercial' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<ul id='commercial-mobile' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<!-- Office -->
<ul id='test' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<ul id='test-mobile' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
</div>
</div>
</div>
<footer class="page-footer teal">
<div class="footer-copyright">
<div class="container">
Copyright @
<a class="white-text" href="#">2018</a>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.carousel.carousel-slider').carousel({
fullWidth: true
});
$('.slider').slider();
$(".dropdown-button").dropdown({
hover: true
});
});
</script>
Here is my full code: https://codepen.io/bukuchaga/pen/Zjqvxe 这是我的完整代码： https : //codepen.io/bukuchaga/pen/Zjqvxe
Thanks again. 再次感谢。
2 个解决方案
解决方案1
0 2018-08-08 05:45:54
It kind of worked when I removed position: relative property from the style class nav .nav-wrapper . 当我从样式类nav .nav-wrapper删除position: relative属性时，这种工作方式起作用。 You can either remove it or override it with position: inherit . 您可以删除它，也可以使用position: inherit覆盖它。
解决方案2
0 已采纳 2018-08-08 06:15:41
You are doing it wrong, you should know how the position properties work. 您做错了，您应该知道位置属性的工作方式。 You are using position relative. 您正在使用相对位置。 so when you use position relative it means relative to itself not from something else . 所以当你使用position relative ，意味着relative to itself而不是something else 。 Next time keep in mind how these tricky things works so that it won't waste your time in resolving the error caused by them. 下次请记住这些棘手的事情是如何工作的，这样就不会浪费您的时间来解决由它们引起的错误。
I have seen your code, the css wrapper class nav .nav-wrapper has a wrong relative position. 我看过您的代码，css包装器类nav .nav-wrapper的相对位置错误。
You don't need to use relative position here because, It is unnecessary . 您无需在此处使用relative position ，因为，这是unnecessary 。 So, remove it and your code will work like a charm. 因此， remove其remove ，您的代码将像魅力一样工作。
If you have any other error in design, post another question and if i or someone else has answered your question marked my or someone answer as accepted so that this thread can be closed. 如果您在设计中还有其他错误，请发布另一个问题，如果我或其他人已经回答您的问题，则将我或某人的回答标记为已接受，以便可以关闭此线程。 Thanks. 谢谢。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.