Cool hover effect on menu

Posted on January 5th, 2020

Menu is the most important element on a website. This post will show you how to create a cool hover effect on menu from Darkcode. Just click on the button Run Pen below to see how it works:

How to create a cool hover effect on menu

Step 1: Add Html

<ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Works</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Concact</a></li>
      <li><a href="#">Buy</a></li>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #f1f1f1;
#menu {
  margin: 0;
  padding: 0;
  margin-top: 150px;
#menu li {
  list-style: none;
  display: inline-block;
#menu li a {
  text-decoration: none;
  position: relative;
  color: #313131;
  font-size: 50px;
  font-weight: 700;
  font-family: sans-serif;
  display: block;
  overflow: hidden;
  transition: 0.7s all;
  padding: 14px 0px;
  margin: 0px 30px;
  text-transform: uppercase;
#menu li a:before {
  content: '';
  width: 60px;
  position: absolute;
  border-bottom: 8px solid #313131;
  bottom: 0;
  right: 350px;
  transition: 0.7s all;
#menu li a:hover:before {
  right: 0;