How to avoid the dropdown from disappearing when removing cursor from the button?

When I hover over the button I see the dropdown menu however, when I navigate to any of the item on the menu the dropdown menu just disappears. I think I know the problem is that I have hover added on the button only, but how can I make it work like a normal dropdown ?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.dropdown {
  display: inline-block;
  padding: 5px;
  /* background:#f1f1f1; */
}

.dropbtn {
  padding: 5px;
  margin-bottom: 0px;
  width: 100%;
}

.dropdown-content {
  display: none;
  list-style: none;
  background: #f1f1f1;
  position: relative;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  text-align: center;
  z-index: 1;
  width: 100%;
}

.dropdown-content li {
  margin-bottom: 0px;
  padding: 3px;
}

.dropdown-content li a {
  text-decoration: none;
  color: black;
  padding: 3px;
}

.dropdown-content li:hover,
.dropdown-content li a:hover {
  text-decoration: none;
  color: white;
  background-color: #333;
}

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

<!-- language: lang-html -->

<div class="dropdown">
  <button class="dropbtn">More</button>
  <ul class="dropdown-content">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<!-- end snippet -->

I want the dropdown menu to stay visible while I am hovering over the child elements in the dropdown menu as any other dropdown menu works.

You could set the :hover property directly on the .dropdown element like this :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.dropdown {
  display: inline-block;
  padding: 5px;
  /*background:#f1f1f1; */
}

.dropbtn {
  padding: 5px;
  margin-bottom: 0px;
  width: 100%;
}

.dropdown-content {
  display: none;
  list-style: none;
  background: #f1f1f1;
  position: relative;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  text-align: center;
  z-index: 1;
  width: 100%;
}

.dropdown-content li {
  margin-bottom: 0px;
  padding: 3px;
}

.dropdown-content li a {
  text-decoration: none;
  color: black;
  padding: 3px;
}

.dropdown-content li:hover,
.dropdown-content li a:hover {
  text-decoration: none;
  color: white;
  background-color: #333;
}

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

<!-- language: lang-html -->

<div class="dropdown">
  <button class="dropbtn">More</button>
  <ul class="dropdown-content">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<!-- end snippet -->

You are using hover in CSS, which is the normal behaviour for your case. If you want to click on the button, and display the dropdown you will need some Javascript and an onclick event :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function showDropdown() {
  var content = document.getElementById("dropdown-content");
  if (content.style.display === "block") {
    content.style.display = "none";
  } else {
    content.style.display = "block";
  }
}

<!-- language: lang-css -->

.dropdown{
  display:inline-block;
  padding:5px;
/*   background:#f1f1f1; */
}

.dropbtn{
  padding:5px;
  margin-bottom:0px;
  width:100%;
}

.dropdown-content{
  display:none;
  list-style:none;
  background:#f1f1f1;
  position:relative;
  top:0px;
  left:0px;
  padding: 0px 0px 0px 0px;
  margin:0px;
  text-align: center;
  z-index:1;
  width:100%;
}

.dropdown-content li{
  margin-bottom:0px;
  padding:3px;
}

.dropdown-content li a{
  text-decoration:none;
  color:black;
  padding:3px;
}

.dropdown-content li:hover
,.dropdown-content li a:hover{
  text-decoration:none;
  color:white;
  background-color:#333;
}

<!-- language: lang-html -->

<div class="dropdown">
  <button class="dropbtn" onclick="showDropdown()">More</button>
  <ul class="dropdown-content" id="dropdown-content">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<!-- end snippet -->