Code begins here
<html>
<head>
<title>EDUTECH KHEM</title>
<style>
/* Header with logo and title */
.header {
display: flex;
align-items: center;
padding: 20px;
background: #f1f1f1;
}
.header img {
height: 120px; /* approx 2 inches */
width: 120px;
border-radius: 50%; /* circular logo */
object-fit: cover;
margin-right: 20px; /* space between logo and title */
}
.header h1 {
font-size: 50px; /* large font */
color: #333;
margin: 0;
}
/* Navigation menu */
nav {
background: #333;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left; /* horizontal menu */
position: relative; /* for dropdown */
}
nav ul li a {
display: block;
padding: 15px 30px;
color: white;
text-decoration: none;
font-size: 22px;
}
nav ul li a:hover {
background: white;
color: black;
}
/* Dropdown menu */
nav ul li ul {
display: none;
position: absolute;
top: 100%; /* below parent */
left: 0;
background: #f9f9f9;
list-style: none;
padding: 0;
min-width: 150px;
}
nav ul li:hover > ul {
display: block;
}
nav ul li ul li a {
color: black;
padding: 10px;
}
nav ul li ul li a:hover {
background: rgb(138, 130, 130);
}
/* Clear floats */
nav::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- Header with logo and title -->
<div class="header">
<img src="logo.png" alt="EDUTECH KHEM Logo">
<h1>EDUTECH KHEM</h1>
</div>
<!-- Navigation menu -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Grades</a>
<ul>
<li><a href="#">Grade 12</a></li>
<li><a href="#">Grade 11</a></li>
<li><a href="#">Grade 10</a></li>
<li><a href="#">Grade 9</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
