dropdown navigation menu malfunction - html

Question

updated issue!! I would like my navigation bar to have a drop down effect when hovering over it. I have tried the different methods suggested and my list was hidden behind my section following. So after changing it incorrectly so many time, I have now gotten confused. This is how it is currently. Now the dropdown list is stuck on display. I just want the list to show when hovering. Also the search box is supposed to be on the same line as the nav links but it has now moved below. I can figure out how to fix that if someone can help me with the drop down menu, please.
.navbar {
background: linear-gradient(#9E0A0C,#EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a{
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 1.5vw;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar ul:after {
content: "";
display: table;
clear: both;
}
.navbar li{
border-left: solid 2px #000000;
list-style-type: none;
display: inline;
width: 800px;
padding: 0;
/*position: relative;*/
}
/*li a {
display: block;
color: white;
text-align: center;
padding: 5px 94px;
text-decoration: none;
}*/
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 1.5vw;
}
li:first-child {
border-left: none;
}
.dropdown {
display: none;
position: relative;
overflow: hidden;
}
.list {
display:none;
/*opacity: 0;
visibility: hidden;*/
z-index: 100;
min-width: 50px;
max-width: 350px;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
/*transition: 0.3s ease-in-out;*/
}
.list a {
color: #000000;
font-size: 1.25vw;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
column-count: 2;
}
.list a:hover {
background-color: #EEEEEE;
font-size: 1.25vw;
}
.dropdown:hover, .list {
display: block;
/*position: absolute;
left: 0;*/
}
<nav class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list"> NEWS FACILITIES OFFICERS GUEST BOOK </div>
</li>
<li class="dropdown">Events
<div class="list"> CALENDAR BINGO </div>
</li>
<li class="dropdown">Contact Us
<div class="list"> WHO ARE WE? </div>
<div class="list"> BECOME AN ELK </div>
</li>
</ul><form action="search.html">
<input class="search" type="text" placeholder="Search.." name="search">
</form>
</nav>

Answer 1

within your css the line .dropdown:hover, .list { should be .dropdown:hover .list { without the comma
put your form into an <li> element within the <ul>. the float: right should be assigned to the form not the input
html:
...
</li>
<li>
<form class="navbar-search" action="search.html">
<input class="search" type="text" placeholder="Search.." name="search">
</form>
</li>
</ul>
</nav>
css:
.navbar-search {
float: right;
}
update:
I don't know why you would like to have a column-count. is this on purpose?
in the last <li>element are two divs -> one overlays the other
please do you self a favour and reduce the amount of whitspaces as well as putting one html element per line and use comments (html AND css)! this makes debugging a whole lot easier and you will still understand what you did yesterday.
update 2:
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 1.5vw;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar ul:after {
content: "";
display: table;
clear: both;
}
.navbar li {
border-left: solid 2px #000000;
list-style-type: none;
display: inline;
width: 800px;
padding: 0;
/*position: relative;*/
}
/*li a {
display: block;
color: white;
text-align: center;
padding: 5px 94px;
text-decoration: none;
}*/
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 1.5vw;
}
li:first-child {
border-left: none;
}
.dropdown {
display: none;
position: relative;
overflow: hidden;
}
.list {
display: none;
z-index: 100;
min-width: 50px;
max-width: 350px;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
}
.list a {
color: #000000;
font-size: 1.25vw;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
}
.list a:hover {
background-color: #EEEEEE;
font-size: 1.25vw;
}
.dropdown:hover .list {
display: block;
}
.navbar-search {
float: right;
}
<nav class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
WHO ARE WE?
BECOME AN ELK
</div>
</li>
<li>
<form class="navbar-search"action="search.html">
<input class="search" type="text" placeholder="Search.." name="search">
</form>
</li>
</ul>
</nav>