Utilizing inline blocks is often the most straightforward approach.
The key disparity between inline blocks and table cells becomes evident when you resize the browser. If you resize the browser with blocks, they will stack vertically one after the other, whereas table cells will maintain their default arrangement.
See an example here (resize the output window):
https://jsfiddle.net/dv7k720s/
You can also explore the solution presented by haltersweb for working with a table layout.
Furthermore, I quickly restructured your menu based on the w3schools tutorial for you to review and understand.
https://jsfiddle.net/LmLbefts/1/
<ul>
<li class="dropdown">
<a href="#" class="dropbtn">Services</a>
<div class="dropdown-content">
<a href="#">Our Services</a>
<a href="#">Client List</a>
</div>
</li>
<li><a href="#resources">Resources</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#company">Company</a></li>
<li><a href="#">
<form class="searchbar" action="http://www.google.com/search" name="f" target="_blank" style="margin: 0px">
<input type="hidden" name="any selected">
<input size="10" name="q" value="" class="searchform" placeholder="Web Search">
<input type="submit" value="Go!" name="btnG" class="searchbutton"><br>
</form>
</a></li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(to top, rgba(9, 9, 44, 0.9), rgba(82, 82, 115, 0.9));
line-height: 2em;
text-align: center;
vertical-align: middle;
}
li {
display:inline;
margin-left:2%;
margin-right:2%;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
/* To edit if you want a hover color */
/*background-color: red;*/
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-image: linear-gradient(to top, rgba(9, 9, 44, 0.9), rgba(82, 82, 115, 0.9)); color:white;}
.dropdown:hover .dropdown-content {
display: block;
}
The W3Schools provides a basic CSS tutorial explaining how to create vertical or horizontal navigation bars:
Link: http://www.w3schools.com/css/css_navbar.asp
For understanding how dropdown menus function, you can refer to this tutorial:
http://www.w3schools.com/css/css_dropdowns.asp
Take a peek at the preview to see how it looks like:
https://i.sstatic.net/G0jNh.png