MVC How make a logout button - html

Question

First CSS isnt my strong skill. Im following this example to create my menu bar
http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_active
First I try put it on jsFiddle but doesnt look the same
I can make the green selected change when user select different button. Can change between Login and Username when user is authenticated.
In my View I change it to something like:
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Login</li>
<li> Welcome Administrator Logout </li>
</ul>
But doesnt stay on same line and doesnt look to good. Any suggestion on how improve my UI? Make it stay on same line or change the approach?
Current CSS:
<style>
body {
background-color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>

Answer 1

I'd updated your jsFiddle
You should separate the Welcome administrator message from the Logout button

Answer 2

I improve the style using a door image.
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li style="float:right"><a href="#about">Login
<img src="http://i66.tinypic.com/25oxgxz.jpg" border="0"></a></li>
<li style="float:right"><a href="#Logout" style="color: red">Welcome Administrator
<img src="http://i64.tinypic.com/157n953.png" border="0"></a></li>
</ul>
JSFiddle