Your code needed a complete overhaul as it was disorganized and didn't follow standards. Take a look at the revised code below to see where you can improve your CSS skills.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {font-family: arial;}
header {background-color: #2A3943;padding: 10px 40px;box-shadow: 2.5px 2.5px 2.5px #888888;border-radius: 4px;}
header nav h1 {display: inline-block;color: white;}
header nav {display: block;}
header nav ul {list-style: none; padding: 0;display: block;}
header nav ul li {position:relative;display: inline-block;border-radius: 2px;cursor: pointer;padding: 22px;background-color: #1AB188;box-shadow: 2.5px 2.5px 2.5px #0d1215;margin:0 5px;text-align: center;}
header nav ul li:hover > ul {visibility: visible;transform: translateY(0%);transition-delay: 0s, 0s, 0.3s;opacity: 1}
header nav ul li > ul {background-color:#1AB188;top:60px;visibility: hidden;position: absolute;width: 100%;transform: translateY(-2em);transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;left:0;opacity: 0;}
header nav ul li a {text-decoration: none;color: white;display: block;}
header nav ul li a:hover {color: #333;}
header nav ul li:last-child {float: right;margin-right: 0;padding: 20px 0; background: none;box-shadow: none;}
header nav ul li:first-child {border-radius: none;padding: 0;background-color:transparent;box-shadow: none;margin-right: 40px;}
header nav ul li:nth-child(2) {margin-left: 0;}
header nav ul li:last-child > * {display: inline-block;vertical-align: middle;}
header nav ul li:last-child img {margin-right: 20px;width: 40px;}
header nav ul li:last-child:hover a button {visibility: visible;transform: translateX(0);transition-delay: 0s, 0s, 0.3s;opacity: 1}
header nav ul li a button {padding: 5px;cursor: pointer;background-color: rgba(164, 19, 34, 0);color: #fff;visibility: hidden;transform: translateX(2em);transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s;opacity: 0;}
header nav ul li > ul li {box-shadow: none;background: none;display: block;border-radius: 0;margin:0;padding: 21px !important}
header nav ul li > ul li:last-child {float: none;}
header nav ul li > ul li:first-child {margin: 0;}
</style>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<ul>
<li><h1>MemeStagram</h1></li>
<li><a href="index.php" title="Home">Home</a></li>
<li><a href="memes.php" title="Memes">Memes</a>
<ul>
<li><a href="most-popular.php" title="Most Popular">Most Popular</a></li><br>
<li><a href="newest.php" title="Newest">Newest</a></li>
<li><a href="most-viewed.php" title="Most Viewed">Most Viewed</a></li>
</ul>
</li>
<li><a href="about.php" title="About Us">About Us</a></li>
<li><a href="contact.php" target="Contact">Contact</a>
<ul>
<li><a href="bebin.php" title="Bebin">Bebin</a></li>
<li><a href="balbin.php" title="Balbin">Balbin</a></li>
<li><a href="bohan.php" title="Bohan">Bohan</a></li>
<li><a href="barcus.php" title="Barcus">Barcus</a></li>
<li><a href="bonis.php" title="Bonis">Bonis</a></li>
</ul>
</li>
<li><a href="settings.php" title="Settings">Settings</a></li>
<li class="login"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Simpleicons_Interface_unlocked-padlock.svg/1024px-Simpleicons_Interface_unlocked-padlock.svg.png" alt="Login/Logout"><a href="logout.php" title="logout"><button type="submit">Logout</button></a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Since you're new to CSS, here's an explanation of some selectors used:
> This selector targets elements directly inside another element, like li > ul.
* Selects all elements on the page, in this case setting their font to Arial.
:hover Applies styles when the element is hovered over.
:last-child Targets the last child of a parent element.
:first-child Targets the first child of a parent element.
Here's a working example on CodePen: https://codepen.io/anon/pen/MrPBEW