In this tutorial we will see how to make a Simple Horizontal Navigation Menu with HTML and CSS. This menu has hover effect as well, simple HTML and CSS is used for this purpose, complete code is given.
Table of Contents
HTML Code
Take a look at the HTML code given below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cool Simple CSS Menu</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<ul class="menu">
<li>Menu</li>
<li><a href="#">✈</a></li>
<li><a href="#">♫</a></li>
<li><a href="#">✉</a></li>
</ul>
</body>
</html>
CSS Code
CSS code is given below.
<style>
*
{
margin: 0;
padding: 0;
font-family: monospace;
}
body
{
padding: 10px;
}
.menu
{
background-color: #22438C;
width: 60px;
padding: 0px 10px;
line-height: 50px;
overflow: hidden;
color: #eee;
border-radius: 25px;
display: flex;
transition: all .5s ease;
cursor: pointer;
box-shadow: 0px 0px 4px #000;
}
.menu li
{
font-size: 18px;
display: inline-block;
padding: 0px 10px;
margin: 0 auto;
}
.menu li a
{
text-decoration: none;
color: #eee;
}
.menu:hover
{
width: 300px;
}
</style>
Video Tutorial
Watch our video tutorial on How To Create Simple Navigation Menu with HTML and CSS with hover effect.