<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Building Navigation Bar</title> <style> body{ font-size: 15px; font-family: Arial,sans-serif; } ul { padding: 0; list-style: none; background: purple; } ul li { display: inline-block; } ul li a { display: block; padding: 15px 25px; color: orange; text-decoration: none; } ul li a:hover { color: yellow; background: red; } </style> </head> <body> <nav> <ul> <li><a href="#">Fruits</a></li> <li><a href="#">Pineapple</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Banana</a></li> <li><a href="#">Orange</a></li> <li><a href="#">Papaya</a></li> </ul> </nav> <p><strong>Note:</strong> Just click.</p> </body>