如何讓這個簡單的下拉菜單工作？

我是後端開發人員，我正在爲我的項目構建一個簡單的前端。爲了簡單起見，我使用了一個免費的模板;你可以找到一個在線演示在這裏： http://demos.creative-tim.com/light-bootstrap-dashboard/dashboard 如何讓這個簡單的下拉菜單工作？

我需要實現語言切換的下拉菜單，所以我想簡單地複製的HTML代碼：

<nav class="navbar navbar-transparent navbar-absolute"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="../dashboard.html">WELCOME</a> 
 
      </div> 
 
      <div class="collapse navbar-collapse"> 
 

 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li class="dropdown"> 
 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
 
          LANGUAGE 
 
          <b class="caret"></b> 
 
         </a> 
 
         <ul class="dropdown-menu"> 
 
          <li><a href="#">Español</a></li> 
 
          <li class="divider"></li> 
 
          <li><a href="#">Valencià</a></li> 
 
          <li class="divider"></li> 
 
          <li><a href="#">English</a></li> 
 
         </ul> 
 
        </li> 
 
        <li> 
 
         <a href="register.html"> 
 
          Register 
 
         </a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

然後導入所有使用在線演示的CSS和JS文件：

bootstrap.min.css
光自舉的儀表板
PE-圖標-7- stroke.css
animate.min.css
的jquery-1.10.2.js
bootstrap.js
bootstrap.min.js
自舉-複選框-RADIO-switch.js
自舉-notify.js
引導-select.js
chartist.min.js
光引導-dashboard.js

下拉是在演示右上角。

我錯過了什麼？

來源

2017-06-17 Isaac Bosca

什麼是你的問題？ – Jonathan

創建jsfiddle或codepen –

我的問題是爲什麼它不工作。我會嘗試創建一個codepen。 –

我創建了一個小提琴：https://jsfiddle.net/n2szyz5f/1/和一切正常。

外部資源的正確版本可能在您身邊缺失。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2017-06-17 10:36:41 Lindow

你需要嘗試這個

.container { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    font-family: Arial; 
 
} 
 

 
.container a { 
 
    float: left; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.dropdown { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
.dropdown .dropbtn { 
 
    font-size: 16px;  
 
    border: none; 
 
    outline: none; 
 
    color: white; 
 
    padding: 14px 16px; 
 
    background-color: inherit; 
 
} 
 

 
.container a:hover, .dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    float: none; 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #ddd; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <a href="#home">Home</a> 
 
    <a href="#news">News</a> 
 
    <div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
    <a href="#news">Link</a> 
 
</div> 
 

 
<h3>Dropdown Menu inside a Navigation Bar</h3> 
 
<p>Hover over the "Dropdown" link to see the dropdown menu.</p> 
 

 
</body> 
 
</html>

來源

2017-06-18 08:33:39

如何讓這個簡單的下拉菜單工作？

回答

相關問題