<DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> </head> <body> <header> <ul class="nav"> <li class="active"><a href="Website.html">Home</a></li> <li><a href="world%20cup.html">World Cup</a> </li> <li><a href="sports.html">Sports</a></li> <li><a href="schedule.html">Schedule</a></li> <li><a href="about.html">About</a></li> </ul> </div> </header> </body> </DOCTYPE html>
.nav { float: right; list-style-type: none; list-style: none; padding: 10px 100px; margin: 20px; } .nav li { display: inline-block; margin: 10px 5px; } ul.nav li a{ color: #ffffff; text-transform: uppercase; text-decoration: none; font-size: 20px; font-family: "Roboto", sans-serif; margin-bottom: inherit; padding: 5px 10px; letter-spacing: 2px; border: 1px solid #ffffff; } .nav li a:hover{ background: #fff; transition: .4s; color: #000000 } .nav li.active a{ border: 2px solid white; background: #ffffff; color: #000; }
<DOCTYPE html> <stlye> li {float: right; list-style-type: none; list-style: none; padding: 10px 100px; margin: 20px;} </stlye> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> </head> <body> <header> <ul class="nav"> <li class="active"><a href="Website.html">Home</a></li> <li><a href="world%20cup.html">World Cup</a> </li> <li><a href="sports.html">Sports</a></li> <li><a href="schedule.html">Schedule</a></li> <li><a href="about.html">About</a></li> </ul> </div> </header> </body> </DOCTYPE html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)