Scribd
Upload
3 views4 pages

Week 6 ICT101 classactivityhtml

This document is an HTML template for a web page featuring a drop-down navigation bar. The navigation bar includes links for Home, About, Services (with sub-links for Web Design, SEO, and Digital Marketing), and Contact. The styling is done using CSS to enhance the appearance and functionality of the navigation elements.

Uploaded by

pranisx0909liza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views4 pages

Week 6 ICT101 classactivityhtml

This document is an HTML template for a web page featuring a drop-down navigation bar. The navigation bar includes links for Home, About, Services (with sub-links for Web Design, SEO, and Digital Marketing), and Contact. The styling is done using CSS to enhance the appearance and functionality of the navigation elements.

Uploaded by

pranisx0909liza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Week 5 Activity - Drop-down Nav Bar</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

.navbar {

overflow: hidden;

background-color: #333;

.navbar a {

float: left;

font-size: 16px;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}
.dropdown {

float: left;

overflow: hidden;

.dropdown .dropbtn {

font-size: 16px;

border: none;

outline: none;

color: white;

padding: 14px 20px;

background-color: inherit;

font-family: inherit;

margin: 0;

.navbar a:hover, .dropdown:hover .dropbtn {

background-color: #555;

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px rgba(0,0,0,0.2);


z-index: 1;

.dropdown-content a {

float: none;

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

.dropdown-content a:hover {

background-color: #ddd;

.dropdown:hover .dropdown-content {

display: block;

</style>

</head>

<body>

<div class="navbar">

<a href="#home">Home</a>

<a href="#about">About</a>
<div class="dropdown">

<button class="dropbtn">Services

&#9662;

</button>

<div class="dropdown-content">

<a href="#web">Web Design</a>

<a href="#seo">SEO</a>

<a href="#marketing">Digital Marketing</a>

</div>

</div>

<a href="#contact">Contact</a>

</div>

</body>

</html>

You might also like