Javascript 从主内容下隐藏的导航栏下拉列表
我正在做一个网站项目，在那里我使用框架 问题：Javascript 从主内容下隐藏的导航栏下拉列表,javascript,html,css,materialize,Javascript,Html,Css,Materialize,我正在做一个网站项目，在那里我使用框架 问题： 我必须制作一个导航栏，在那里它应该能够显示一个下拉菜单/子菜单。我认为主要问题可能是溢出：或z索引。因此，我尝试测试auto、visible等之间的溢出。在测试过程中，我得到了两个观察结果： 导航栏下拉菜单非常完美，但隐藏在主要内容后面 导航栏下拉列表完美地显示在主要内容的顶部，但在导航栏和主要内容之间产生了一个很大的空白 有人能指出我错过了什么吗？或者我的代码中有什么错误，如果您有任何帮助，我们将不胜感激，谢谢 这是我的HTML： <
- 我必须制作一个导航栏，在那里它应该能够显示一个下拉菜单/子菜单。我认为主要问题可能是
：或溢出
。因此，我尝试测试z索引
、auto
等之间的溢出。在测试过程中，我得到了两个观察结果：visible - 导航栏下拉菜单非常完美，但隐藏在主要内容后面
- 导航栏下拉列表完美地显示在主要内容的顶部，但在导航栏和主要内容之间产生了一个很大的空白
<!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>
-
-
-
-
-
-
-
-
-
-
-
-
密室
项目：亲密之家
地点：印度尼西亚西雅加达普里岛普特里岛
场地面积：160平方米
建筑面积：210平方米
设计阶段：2016年
建设期：2016年4月-2017年7月
私密住宅建在雅加达西部一块8米x 20米的土地上。起初，它是一栋一层的房子，有两间卧室和两间浴室。
它有一个高的天花板，但缺乏开放的空间内的房子，使这所房子看起来
极度黑暗、潮湿、闷热。
我们通过将服务区和私人区分开来改造这个住宅项目。此外，私人区域通过一个
连接室，以便将服务区转换为可使用的私人区域
作为一个聚会室，这是这个亲密的房子的主要区域。
客厅设计为自然空气循环和自然采光。这两种天然元素都是从
靠近客厅、高天花板和天窗的开放空间。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-