Pure CSS3 menu

Pure CSS3 menu without using class or id. What is a pure css3 menu How do you make a pure css3 menu? This script and codes were developed by Jeya Karthika on 01 February 2022, Tuesday.

How do I make an pure css3 menu?
  1. Pure CSS3 menu Previews
  2. Pure CSS3 menu HTML Codes
  3. Pure CSS3 menu CSS Codes
Pure CSS3 menu Previews

Pure CSS3 menu HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Pure CSS3 menu</title>
  <script src="//use.edgefonts.net/source-sans-pro.js"></script>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</nav>
  
  
</body>
</html>

Pure CSS3 menu CSS Codes

body {
  margin: auto;
  align: center;
}
nav ul li {
  float: left;
}

nav ul {
  position: relative;
  display: inline-block;
  list-style: none;
}

nav ul:after {
  content:"  ";
  clear: both;
  display: block;
}

li a{
  text-decoration: none;
  padding: 10px 20px 10px 20px;
  font-family: source-sans-pro, sans-serif;
  background: #27ae60;
  color: #ffffff;
}

li a:hover {
  background: #2ecc71;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.