materializecss 导航下拉菜单答案

【问题标题】：materializecss navigation dropdownmaterializecss 导航下拉菜单
【发布时间】：2016-02-03 06:24:26
【问题描述】：

我尝试使用 materializecss 下拉菜单功能，但在四个下拉菜单项中，我只看到下拉菜单中的两个项。这是我的 HTML 代码

<nav class="white blue-text">
  <div class="navbar-wrapper container">
    <!-- <a class="brand-logo center waves-effect waves-light" href="javascript:void(0)">Abdul-Samii</a> -->
    <a href="#" data-activates="mobile-menu" class="button-collapse indigo-text"><i class="material-icons">menu</i></a>
    <a href="#" class="brand-logo left">
      <img src="images/logo.png" class="top-logo">
    </a>

    <ul class="hide-on-med-and-down right">
      <li class="waves-effect waves-light"><a href="index.html">Home</a>
      </li>
      <li class="waves-effect waves-light"><a href="about.html">About Us</a>
      </li>
      <li class="waves-effect waves-light"><a class="dropdown-button" href="#!" data-activates="dropdown1" href="javascript:void(0)">Gallery</a>
      </li>
      <ul id='dropdown1' class='dropdown-content'>
        <li><a href="#!">Videos</a>
        </li>
        <li><a href="#!">Publication</a>
        </li>
        <li><a href="#!">Interviews</a>
        </li>
        <li><a href="#!">Pictures</a>
        </li>
      </ul>
      <li class="waves-effect waves-light"><a href="javascript:void(0)">News</a>
      </li>
      <li class="waves-effect waves-light active"><a href="events.html">Events</a>
      </li>
      <li class="waves-effect waves-light"><a href="partners.html">Partners</a>
      </li>
      <li class="waves-effect waves-light"><a href="javascript:void(0)">Contact Us</a>
      </li>
    </ul>
    <ul class="side-nav" id="mobile-menu">
      <li class="waves-effect waves-light"><a href="index.html">Home</a>
      </li>
      <li class="waves-effect waves-light"><a href="about.html">About Us</a>
      </li>
      <li class="waves-effect waves-light"><a href="javascript:void(0)">Gallery</a>
      </li>
      <li class="waves-effect waves-light"><a href="javascript:void(0)">News</a>
      </li>
      <li class="waves-effect waves-light active"><a href="events.html">Events</a>
      </li>
      <li class="waves-effect waves-light"><a href="partners.html">Partners</a>
      </li>
      <li class="waves-effect waves-light"><a href="javascript:void(0)">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

我在我的 css 中对导航做的唯一事情是：

nav ul a {
  font-size: 1.1rem;
  color: #2196F3;
}
nav,
nav .nav-wrapper i,
nav a.button-collapse,
nav a.button-collapse i {
  height: 105px;
  line-height: 105px;
}

查看此链接上的导航栏：http://www.jalasem.com 并点击图库以了解我在说什么

【问题讨论】：

请创建一个包含所有资源链接的问题演示。这将帮助您很快得到答案。

标签： javascript html css materialize

【解决方案1】：

猜猜我得到了你想要的.. 有一件非常小的事情使您的代码中断.. 我刚刚从下拉列表的<li> 标记中删除了 class="waves-effect waves-light"。

以下是工作代码及其所有 CDN 文件，因此只需将我的代码复制并粘贴到任何文件中，以 .html 扩展名保存并直接运行。

标题部分

<!DOCTYPE HTML><html>
<head><title>
    </title>

    <!-- Font-Awesome CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">


</head>

接下来是带导航的正文

<body>

    <nav class="white blue-text">
      <div class="navbar-wrapper container">
        <!-- <a class="brand-logo center waves-effect waves-light" href="javascript:void(0)">Abdul-Samii</a> -->
        <a href="#" data-activates="mobile-menu" class="button-collapse indigo-text"><i class="material-icons">menu</i></a>
        <a href="#" class="brand-logo left">
          <img src="images/logo.png" class="top-logo">
      </a>

      <ul class="hide-on-med-and-down right">
          <li class="waves-effect waves-light"><a href="index.html">Home</a>
          </li>
          <li class="waves-effect waves-light"><a href="about.html">About Us</a>
          </li>
          <li>
            <a class="dropdown-button" href="#!" data-activates="dropdown1" href="javascript:void(0)">Gallery</a>
          </li>
          <ul id='dropdown1' class='dropdown-content'>
            <li>
                <a href="#!">Videos</a>
            </li>
            <li>
                <a href="#!">Publication</a>
            </li>
            <li>
                <a href="#!">Interviews</a>
            </li>
            <li>
                <a href="#!">Pictures</a>
            </li>
        </ul>
        <li class="waves-effect waves-light"><a href="javascript:void(0)">News</a>
        </li>
        <li class="waves-effect waves-light active"><a href="events.html">Events</a>
        </li>
        <li class="waves-effect waves-light"><a href="partners.html">Partners</a>
        </li>
        <li class="waves-effect waves-light"><a href="javascript:void(0)">Contact Us</a>
        </li>
    </ul>
    <ul class="side-nav" id="mobile-menu">
      <li class="waves-effect waves-light"><a href="index.html">Home</a>
      </li>
      <li class="waves-effect waves-light"><a href="about.html">About Us</a>
      </li>
      <li class="waves-effect waves-light"><a href="javascript:void(0)">Gallery</a>
      </li>
      <li class="waves-effect waves-light"><a href="javascript:void(0)">News</a>
      </li>
      <li class="waves-effect waves-light active"><a href="events.html">Events</a>
      </li>
      <li class="waves-effect waves-light"><a href="partners.html">Partners</a>
      </li>
      <li class="waves-effect waves-light"><a href="javascript:void(0)">Contact Us</a>
      </li>
  </ul>

最后是带有正文结束标记和页脚的脚本和样式

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
</body></html>

导航的样式与您使用的相同，我没有在代码中添加，但您添加它然后运行代码

希望你得到我的答案。祝你好运。。

【讨论】：