I want to make a menu like this in the photo with a gray background. 
css code:
#menu ul{
position:absolute;
list-style:none;
text-transform:uppercase;
left:-40px;
top:54%;
}
li{
margin:-20px 50px 0px 50px;
background-color:darkgray;
text-align: center;
display:inline-block;
padding:10px 65px 10px 2px;
}
From Example Below, you will be able to create a Top Nav of your taste, you can change code and add what you want or even create one on the basis of this:
<html>
<head>
<style>
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-style: oblique;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #0095ff;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Movies</a></li>
<li class="right"><a href="#">Logout</a></li>
</ul>
<div style="padding:0 16px;">
<h2>Seu Conteúdo</h2>
</div>
</body>
</html>