How to inline navbar elemens - html

Question

I am styling the navbar my simple side with the following code:
Html:
<div>
<ul class="navbar-brand">
<a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/><br /><a target='_blank' href='https://postimage.org/'> </a><br /><br />
</ul>
<ul class="navbar-right">
<li>home</li>
<li>about</li>
<li>delivery</li>
<li>services</li>
</ul>
</div>
CSS:
ul{
list-style:none;
display:inline;
}
li{
list-style: none;
display: inline;
width:100%;
padding: 10px;
}
ul.navbar-brand{
float:left;
}
ul.navbar-right{
float:right;
}
As my snippet shows( https://jsfiddle.net/Wosley_Alarico/t3uhg5n1/1/ ). The logo is floated to the left and the menu to the right as I want. But the problem is that the menu went the top and would actually like it to be positioned to the bottom.
How can I actually make the menu go to the bottom instead and keep it floated to the right?

Answer 1

I can see few issues:
For 1st a tag there is no closing of it
You can remove 2nd a if you are not using
ul can't be used with li so, changed it to div or span
Remove float:right from navbar-right class it will come in the bottom of logo.
add a ul class with magin, padding 0
ul{
list-style:none;
display:inline;
margin:0;
padding:0;
}
li{
list-style: none;
display: inline;
width:100%;
padding:10px 10px 10px 0;
}
ul.navbar-brand{
float:left;
}
ul.navbar-right{
}
<div>
<div class="navbar-brand">
<a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/></a>
</div>
<ul class="navbar-right">
<li>home</li>
<li>about</li>
<li>delivery</li>
<li>services</li>
</ul>
</div>

Answer 2

ul.navbar-right{
float:right;
position:relative;
bottom:0;
}