Выпадающее меню не отображает свои элементы

Я хочу создать раскрывающееся меню, когда я нажимаю на глификон стрелку вниз, оно должно отображать раскрывающееся меню, в котором есть эти элементы [Сообщения, выход из системы и т. д.]. Однако, когда я нажимаю на нее, вообще ничего не появляется, чего здесь не хватает?

//Html File: 

<html>
<!-- Head -->
<head>
     <!-- Bootstrap -->
    <link href = "css/bootstrap.min.css" rel = "stylesheet">
    <link href = "css/bootstrap-theme.min.css" rel = "stylesheet">
    <link href = "css/font-awesome.min.css" rel = "stylesheet">
    <link href = "css/bootstrap-social.css" rel = "stylesheet">
    <link href = "css/style.css" rel = "stylesheet">


</head>

<!-- Body --> 
<body>
<div class = "navbar">
  <a  href = "#"><i class = "fa fa-home"></i> Marble </a> 
  <a class = "left"> <i onclick = "myFunction(this)" class = " fa fa-bell" ></i> Notifications </a> 
  <a class = "left user"> <i class = " fa fa-user-circle"> </i> User   </a>

  <div class = "dropdown">
  <a class = "editClass dropdown-toggle" data-toggle = "dropdown" >  <span class = " glyphicon glyphicon-menu-down"></span> </a>
  <ul class = "dropdown-menu"> //when i remove class = "dropdown-menu", the items appears but the drop down is gone, and when i add them back, the items are not shown when i click the drop down icon.
    <li> <a> <i class = "fa fa-envelope-o"></i> Messages </a> </li>
    <li role = "separator" class = "divider"></li>
    <li> <a> <i class = "fa fa-hourglass-3"></i> Timeline </a> </li>
    <li role = "separator" class = "divider"></li>
    <li> <a> <i class = "fa fa-cog"></i> Settings </a> </li>
    <li role = "separator" class = "divider"></li>
    <li> <a> <span class = "glyphicon glyphicon-log-out"></span> Log Out </a> </li>
    <li role = "separator" class = "divider"></li>
  </ul>

</div>
</div> 

<div>
    <img src = "Diagram.png" alt = "diagram" width = "400" height = "300"> 
</div>
<div>
    <p id = "sentence"> "You don't have any projects" </p>
    <button onclick = "createProject()" class = "button1 btn btn-lg"> <b> Add Project </b> </button>
</div>
<div>
    <form class = "form-popup" id = "projects">
        <h2 align = "center"> <span class = "glyphicon glyphicon-th"></span> New Project </h2>
        <input type = "text" placeholder = "Project Name"  required> <br>
        <textarea placeholder = "Project Description" required = ""></textarea> <br>
        <p> Start Date: </p> 
        <p> End Date: </p>
        <input type = "Date" name = "start Date" required = "">
        <input type = "Date" name = "End Date" required = "">
        <h2 align = "center"> <span class = "glyphicon glyphicon-book"> </span> References </h2>
        <div id = "refTextBoxes">
        <input type = "text" placeholder = "Add Reference" required> <br>
        </div>
        <button onclick = "addRef()"> Add another </button> <br>
        <button type = "submit" onclick = "hideAndAdd()" > Done </button>
        <!-- class = "btn" bt3ml el button shakl kda 7elw --> 

    </form>
</div>


  <script>

  function myFunction(x)
   {
  x.classList.toggle("fa-bell-slash");
    }
  function createProject()
   {
  document.getElementById("projects").style.display = "block";
   }
  function addRef()
  {
    var totalTextBoxes = document.getElementsByClassName("input_text");
    totalTextBoxes = totalTextBoxes.length + 1;  
    document.getElementById("refTextBoxes").innerHTML=document.getElementById("refTextBoxes").innerHTML+
   "<input type='text' class='input_text' id='input_text"+totalTextBoxes+"' placeholder='Add Reference' + required> <br>";
  }
  function hideAndAdd()
  {
     var x = document.getElementById("sentence");
     x.style.display = "none";
  }

  </script>

</body>


<!-- Closing of html tag -->
</html>

//Css File:

body
 {
  font-family: Arial, Helvetica, sans-serif;
  /* background-color: #ABB1BA; */
 }
.form-popup
{
  display: none;
}

/* Style the navigation bar */
.navbar
{
  width: 100%;
  background-color: #877ebf;
  overflow: auto;
}

/* Navbar links */
.navbar a
{
  float: left ;
  text-decoration: none;
  color: #CCCCCC;  
  font-size: 17px;
  padding: 12px;
}


/* Navbar links on mouse-over */
.navbar a:hover, i:hover, span:hover
{
  background-color: #555;
  cursor: pointer;
}

img
{
  display: block;
    margin-left: auto;
    margin-right: auto;
}
p
{
  text-align: center;
  font-family: "Arial Black", Gadget, sans-serif;
    font-size: 20px;
}
button 
{

  text-align: center;  
  font-size: 16px;
  margin: 25px 475px;
  cursor: pointer;

}
.button1 
{
  background-color: #CCCCCC; 
  color: #333333; 
  border: 4px solid #877ebf;
}
/*
.navbar i.editClass, span.editClass
{
  float: right;
}
*/ 
.left
{
  position: absolute;
    right:135;
}
.user
{
  /*margin: 25px 25px; */
  /*float: right;
  padding: 100px; */
  position: absolute;
    right:40;
}
.editClass
{
  position: absolute;
    right:5;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}

Я использую здесь Bootstrap, html и css. Я думаю, что проблема в файле css, но я не могу найти, где именно.

html css twitter-bootstrap twitter-bootstrap-3

31.01.2019 22:08

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...