物化CSS导航下拉菜单

Question

我尝试使用 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;
}

检查此 link 上的导航栏：http://www.jalasem.com 然后点击图库了解我在说什么

Answer 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

<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>

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

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

物化CSS导航下拉菜单

materializecss navigation dropdown

html

javascript

css

materialize