21_HTML_5_Navigation_Element.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Nav Element</title>
    <style>
        body{
            font-family: Arial, sans-serif;
            margin: 0;
        }
        nav{
            background-color: orange;
            padding: 7px;
            box-shadow: 0 0 15px black;
        }
        nav a{
            text-decoration: none;
            color: black;
            font-size: 20px;
            padding: 10px 25px;
            display: inline-block;
        }
        nav a:hover{
            background-color: orangered;
            color: white;
            box-shadow: 0 0 5px black;
        }
        nav a.active{
            background-color: darkred;
            color: white;
            box-shadow: 0 0 5px black;
        }
    </style>
</head>
<body>

   <!-- HTML Nav Element -->
<nav>
    <a href="#" class="active">Home</a>
    <a href="#">Movies</a>
    <a href="#">Entertainments</a>
    <a href="#">Songs</a>
    <a href="#">games</a>
    <a href="#">More</a>
</nav>


</body>
</html>