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

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

Answer 1

猜猜我得到了你想要的东西.. 有一个非常小的东西让你的代码中断.. 我刚从下拉列表的<li>标记中删除了 class =＆＃34; wave-effect wave-light＆＃34; 。

下面是工作代码及其所有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>

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

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

materializecss导航下拉列表

1 个答案: