JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="nav3">
<ul>
<li><a href="#" style="float: left;">Home</a></li>
<?php
if($_SESSION){
?> <li><a href="#" style="float: left; border-right: 1px solid #ccc;">Logout</a></li> <?
}else{
?> <li><a href="#" style="float: left;">Login</a></li>
<li><a href="#" style="float: left; border-right: 1px solid #ccc;">Signup</a></li>
<?
}
?>
</ul>
</div>
<img style="margin-left: 650; z-index: 9;" src="http://onlinegw.net/nonlinegw/experiment/includes/logo/diagram_v2_22.png">
<div id="nav">
<ul>
<li><a href="#" style="float: left">XBOX360</a></li>
<li><a href="#" style="float: left">XBOX1</a></li>
<li><a href="#" style="float: left">PS3</a></li>
<li><a href="#" style="float: left; border-right: 1px solid #ccc;">PS4</a></li>
</ul>
</div>
</body>
CSS
/** LEFT SIDE **/
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
}
#nav ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-left: 1px solid #ccc;
margin-left: 0;
}
#nav li:first-child a {
border-left: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/** TOP BAR **/
#nav3 {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
#nav3 ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0;
}
#nav3 li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-left: 1px solid #ccc;
vertical-align: super;
}
#nav3 li:first-child a {
border-left: 1px solid #ccc;
}
#nav3 li a:hover {
color: #c00;
background-color: #fff;
}
/** LOGO **/
#logo {
width: 50%;
float: center;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
}
h4.logo-text {
display: inline;
text-decoration: none;
margin:0;
color:#66bbd4;
font-family:Tahoma;
font-size: 15;
}
img.logo {
margin-right: auto;
margin-left: auto;
padding-left: 635;
margin-right: 4px;
height: 50px;
width: 50px;
vertical-align: middle;
}