materializecss導航下拉菜單

我嘗試使用materializecss下拉菜單功能，但出於四個下拉菜單項目，我只在下拉菜單中看到兩個項目。這是我的HTML代碼materializecss導航下拉菜單

<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做我的資產淨值的唯一事情是這樣的：http://www.jalasem.com 和點擊：

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

檢查該鏈接的導航欄在畫廊瞭解我在說什麼

來源

2015-11-03 Jalasem

請創建一個與所鏈接的所有資源問題的演示。這將幫助你很快得到答案。 –

猜猜我想要什麼.. 有一個非常小的事情，其中de your code break .. 我剛剛從<li>下拉列表中刪除了class =「波浪效應波形燈」。

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

樣式導航是爲u使用我還沒有在代碼中添加，但添加它，然後運行該代碼

希望你得到了我的答相同。祝你好運..

來源

2015-11-04 13:12:00 Niraj

materializecss導航下拉菜單

回答

相關問題