Menu sa zoraďuje pod seba

<div id="header">
<div id="logo"><a href="#"><img src="http://s16.postimg.org/7k38vsjf9/logo2.png" align="left"></a></div>
<div id="menu">
<ul>

<li>
<a href="#">Home</a>
</li>

<li>
<a href="#">Products</a>
</li>

<li>
<a href="#">Services</a>
</li>

</ul>
</div>
</div>

#menu {
list-style: none;
margin: 0px;
}
ul {
list-style-type: none;
float: right;
margin: 0px;
}
li {
font-family: arial black, sans-serif;
font-size: 20px;
text-decoration: none;
margin: 0px;
text-align: center;
width: 200px;
}
li:hover {
color: #ccc;
}
#menu a {
color: #fff;
text-decoration: none;
-webkit-transition: color 0.9s linear;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
display: block;
margin: 0px;
width: 200px;
padding-top: 50px;
padding-bottom: 50px;
}
#menu a:hover {
color: #ccc;
background: rgba(55,55,55,0.5);
-webkit-transition: color 0.9s linear;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
display: block;
padding-top: 50px;
padding-bottom: 50px;
}
#header {
background: #000;
width: 100%;
height: 150px;
margin: 0 auto;
}