rudrathegreat/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <title>Education Model Navigation</title>
</head>
<body>
<header>
    <nav class="nav">
        <ul class="nav-list">
            <li class="nav-list-element">
                <a class="nav-link">Home</a>
            </li>
            <li class="nav-list-element">
                <button class="nav-link">Local Food Production</button>
                <div class="submenu">
                    <ul>
                        <li><a href="#">How to Make a Vegetable Garden</a></li>
                        <li><a href="#">Learn how to Cook</a></li>
                        <li><a href="#">Composting, Worm Farming and Food waste</a></li>
                        <li><a href="#">Seeds and Seedlings</a></li>
                        <li><a href="#">Crop Rotation, Cover Crops and Food Forests</a></li>
                        <li><a href="#">Keeping Chickens, Bee Keeping</a></li>
                    </ul>
                </div>
            </li>
            <li class="nav-list-element">
                <button class="nav-link">Transport</button>
                <div class="submenu">
                    <ul>
                        <li><a href="#">Cycling</a></li>
                        <li><a href="#">Taking Public Transport</a></li>
                        <li><a href="#">Working from Home</a></li>
                        <li><a href="#">Car Pooling or Car Sharing</a></li>
                        <li><a href="#">Electric Cars</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</header>
</body>
</html>

## style.css
* {
    margin:0;
    padding:0;
}

body {
    background:#ddd;
    font-family:'Roboto', sans-serif;
    font-size:1.5vw;
    text-transform:uppercase;
    font-weight:700;
}

:root {
    --clr-light:#fff;
    --clr-dark:#000;
}

header {
    width:100%;
    height:13vh;
    background:rgba(0,0,0,0.8);
    color:var(--clr-light);
    position:fixed;
    top:0;
    left:0;
}

.nav {
    width:100%;
    height:100%;
}

.nav-list {
    display:flex;
    gap:3em;
    height:100%;
    list-style:none;
    align-items:center;
    margin-left:calc(15vw - 1em);
}

.nav-list-element {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 1em;
    position:relative;

}

.nav-link {
    display:inline-block;
    background:none;
    border:none;
    font-family:'Roboto', sans-serif;
    text-transform:uppercase;
    color:var(--clr-light);
    font-size:1.25vw;
    font-weight:700;
}

.nav-list-element:hover {
    background:var(--clr-light);
}


.nav-list-element:hover > .nav-link {
    color:var(--clr-dark);
}

.nav-link:focus ~ div {
    transform:scale(1,1);
    transition:transform 0.3s ease-in-out;
    transform-origin:top;
}

.nav-link:focus ~ div ul {
    opacity:1;
    pointer-events:all;
    transition:opacity 0.2s ease-in-out 0.4s;
}

.nav-link:focus ~ div a:hover {
    color:#375F29;
}

.submenu {
    display:block;
    width:100%;
    position:absolute;
    top:13vh;
    padding:3vh 2vw;
    left:0;
    background:#eee;
    transform:scale(1,0);
    transition:transform 0.3s ease-in-out 0.3s;
    transform-origin:bottom;
}

.submenu ul {
    display:flex;
    flex-direction:column;
    gap:3vh;
    opacity:0;
    transition:opacity 0.2s ease-in-out;
}

.submenu a {
    font-size:1.25vw;
    color:#555;
    text-transform:none;
    text-decoration:none;
    font-weight:400;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
	<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
	<title>Education Model Navigation</title>
	</head>
	<body>
	<header>
	<nav class="nav">
	<ul class="nav-list">
	<li class="nav-list-element">
	<a class="nav-link">Home</a>
	</li>
	<li class="nav-list-element">
	<button class="nav-link">Local Food Production</button>
	<div class="submenu">
	<ul>
	<li><a href="#">How to Make a Vegetable Garden</a></li>
	<li><a href="#">Learn how to Cook</a></li>
	<li><a href="#">Composting, Worm Farming and Food waste</a></li>
	<li><a href="#">Seeds and Seedlings</a></li>
	<li><a href="#">Crop Rotation, Cover Crops and Food Forests</a></li>
	<li><a href="#">Keeping Chickens, Bee Keeping</a></li>
	</ul>
	</div>
	</li>
	<li class="nav-list-element">
	<button class="nav-link">Transport</button>
	<div class="submenu">
	<ul>
	<li><a href="#">Cycling</a></li>
	<li><a href="#">Taking Public Transport</a></li>
	<li><a href="#">Working from Home</a></li>
	<li><a href="#">Car Pooling or Car Sharing</a></li>
	<li><a href="#">Electric Cars</a></li>
	</ul>
	</div>
	</li>
	</ul>
	</nav>
	</header>
	</body>
	</html>
	* {
	margin:0;
	padding:0;
	}

	body {
	background:#ddd;
	font-family:'Roboto', sans-serif;
	font-size:1.5vw;
	text-transform:uppercase;
	font-weight:700;
	}

	:root {
	--clr-light:#fff;
	--clr-dark:#000;
	}

	header {
	width:100%;
	height:13vh;
	background:rgba(0,0,0,0.8);
	color:var(--clr-light);
	position:fixed;
	top:0;
	left:0;
	}

	.nav {
	width:100%;
	height:100%;
	}

	.nav-list {
	display:flex;
	gap:3em;
	height:100%;
	list-style:none;
	align-items:center;
	margin-left:calc(15vw - 1em);
	}

	.nav-list-element {
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 0 1em;
	position:relative;

	}

	.nav-link {
	display:inline-block;
	background:none;
	border:none;
	font-family:'Roboto', sans-serif;
	text-transform:uppercase;
	color:var(--clr-light);
	font-size:1.25vw;
	font-weight:700;
	}

	.nav-list-element:hover {
	background:var(--clr-light);
	}



	.nav-list-element:hover > .nav-link {
	color:var(--clr-dark);
	}

	.nav-link:focus ~ div {
	transform:scale(1,1);
	transition:transform 0.3s ease-in-out;
	transform-origin:top;
	}

	.nav-link:focus ~ div ul {
	opacity:1;
	pointer-events:all;
	transition:opacity 0.2s ease-in-out 0.4s;
	}

	.nav-link:focus ~ div a:hover {
	color:#375F29;
	}

	.submenu {
	display:block;
	width:100%;
	position:absolute;
	top:13vh;
	padding:3vh 2vw;
	left:0;
	background:#eee;
	transform:scale(1,0);
	transition:transform 0.3s ease-in-out 0.3s;
	transform-origin:bottom;
	}

	.submenu ul {
	display:flex;
	flex-direction:column;
	gap:3vh;
	opacity:0;
	transition:opacity 0.2s ease-in-out;
	}

	.submenu a {
	font-size:1.25vw;
	color:#555;
	text-transform:none;
	text-decoration:none;
	font-weight:400;
	}