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
Chun Ming Wang

Chun Ming Wang

More from Medium

CSS Claymorphism

HOW CSS TRANSITION WORK

CSS Animation Property

MDN Styling and Layout w/CSS chapter 9