Skip to content
Advertisements

Html And Css – Neon Menu

HTML CODE:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

CSS CODE

body{
  margin:0;
  padding:0;
  background-color:#1a1a1a;
}
ul{
  margin:450px 200px;
  padding:0;
  display:flex;
}
ul li{
  list-style:none;
  padding:20px 40px;
  
}
ul li a{
  color:#fff;
  text-decoration:none;
  font-size:35px;
  text-transform: uppercase;
  font-family:sans-serif;
  position: relative;
}
ul li a:before{
  content:"";
  background-color:#009900;
  width:10px;
  height:5px;
  position:absolute;
  top:100%;
  left:0;
  transition:.7s
}
ul li a:hover:before{
  width:50%;
  left:50%
}
ul li a:after{
  content:"";
  background-color:#009900;
  width:10px;
  height:5px;
  position:absolute;
  top:-7px;
  left:100%;
  transition:.7s
}
ul li a:hover:after{
  width:50%;
  left:0
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: