Drop-down menu between ul and li tags doesn't appear

Question

Am I missing something?

I am trying to make the dropdown menu to appear. when i make the page smaller i can see that the menu appear on the bar (i can see only the tip of the "home" option). but, when the page is wide open it seems like it doesn't open at all.

        <ul>
          <li><a style="color:#1a1a1a;" class="welcometitle">Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
          <li style="float:right; background-color: #4CAF50;" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" <%--onclick="myfunction()"--%> href="#">
              <i class="fa fa-bars"></i>
              </a>
              <ul class="dropdown-menu" role="listbox">
                    <li><a href="#home" role="option">Home</a></li>
                    <li><a href="#about" role="option">About</a></li>
                    <li><a href="#contact" role="option">Contact</a></li>
              </ul>
          </li>
          <li style="float:right; padding-right:10px; padding-top:5px; padding-left:5px;"><input  type="text"  class="form-control" placeholder="Search.." name="search"/></li>
          <li style="float:right; padding-right:0px; padding-top:5px; background-color:#ffffff"><button class="btn"  type="submit"><i class="fa fa-search" style=""></i></button></li>
        </ul>

this is my css code, i really don't understand where am I wrong

.searchbar {
    float: left;
    margin: 0px 0;
}
ul#navigation {
    float: left;
    margin: 0 20px 0 0;
}
ul#navigation li {
    display: inline;
    margin-right: 10px;
}

* {box-sizing: border-box;}
ul {
  list-style-type: none;
  margin: 0;
  padding-left: 160px;
  overflow: hidden;
  background-color: #1160a2;
  top:0;
  width:100%;
  position:fixed;
}



/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}




li {
  float: left;
}

li a {
  /*display: block;*/
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  color: white;
}

.active {
  background-color: #4CAF50;
}

.search-container {
  float: right;
}

.li input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 25px;
  border: none;
}

.search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 2px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.search-container button:hover {
  background: #ccc;
}

Answer 1

in case someone has the same problem i found out that the answer was on the css class:

.show {display: block;}

just added "position: fixed" and that was it

            .show {display: block;
               position: fixed;
              }