A Simple CSS Horizontal Navigation Bar Using inline-block

<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a class="active" href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #444;
text-align: center; /* step 6 */
}
nav li {
display: inline-block; /* step 1 */
width: 20%; /* step 4 */
margin-right: -4px; /* step 5 */
}
nav a {
display: block; /* step 2 */
text-decoration: none; /* step 3 */
}
/* common text style */
nav a {
font-family: sans-serif;
height: 40%; /* vertically center */
line-height: 40%; /* vertically center */
color: #fff;
}
nav a:hover {
background-color: #005f5f;
}

nav a.active {
background-color: #eee;
color: #444;
cursor: default;
}

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store