如何让这个简单的下拉菜单工作？

我是后端开发人员，我正在为我的项目构建一个简单的前端。为了简单起见，我使用了一个免费的模板;你可以找到一个在线演示在这里： 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

如何让这个简单的下拉菜单工作？

回答

相关问题