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">
                    <table>
                        <tr>
                            <td style="">
                                <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>
                            </td>
                            <td>
                                <h1>Why Local Food Production?</h1>
                                <p>Food that is imported from other countries has a high carbon footprint due to all the transport
                                and the resources that went into growing and transporting the food from the farms to you. If you instead
                                go for locally-grown food, then the carbon footprint will lower dramatically, as less resources are used
                                transporting the food from the farm to you. You could even go as far as having your own vegetable garden
                                which would have no carbon footprint at all!</p>
                            </td>
                        </tr>
                    </table>
                </div>
            </li>
            <li class="nav-list-element">
                <button class="nav-link">Transport</button>
                <div class="submenu">
                    <table>
                        <tr>
                            <td style="">
                                <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>
                            </td>
                            <td>
                                <h1>Why Transport?</h1>
                                <p>Transport is the key driver in carbon emissions and in order to prevent a climate catastrophe,
                                we need to start looking towards less carbon intensive alternatives to the conventional car.
                                This could include cycling, taking public transport, telecommuting, etc.</p>
                            </td>
                        </tr>
                    </table>
                </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;

}

.nav-link {
    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.5s ease-in-out;
    transform-origin:top;
}

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

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

.submenu {
    position:absolute;
    top:13vh;
    left:0;
    background:var(--clr-light);
    color:var(--clr-dark);
    width:100%;
    height:50vh;
    transform:scale(1,0);
    transition: transform 0.4s ease-in-out 0.3s;
    transform-origin:top;
}

.submenu table {
    height:100%;
    width:70%;
    margin-left:15vw;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease-in-out;
}

.submenu tr {
    width:100%;
    height:100%;
}

.submenu td {
    height:100%;
    width:50%;
}

.submenu ul {
    display:flex;
    flex-direction:column;
    gap:2vh;
    list-style:none;
    justify-content:center;
    height:100%;
}

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

.submenu h1 {
    font-size:2vw;
    text-align:center;
}

.submenu p {
    font-weight:400;
    font-size:1vw;
    text-align:center;
    padding-top:3vh;
    color:#555;
    line-height:1.6;
}
	<!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">
	<table>
	<tr>
	<td style="">
	<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>
	</td>
	<td>
	<h1>Why Local Food Production?</h1>
	<p>Food that is imported from other countries has a high carbon footprint due to all the transport
	and the resources that went into growing and transporting the food from the farms to you. If you instead
	go for locally-grown food, then the carbon footprint will lower dramatically, as less resources are used
	transporting the food from the farm to you. You could even go as far as having your own vegetable garden
	which would have no carbon footprint at all!</p>
	</td>
	</tr>
	</table>
	</div>
	</li>
	<li class="nav-list-element">
	<button class="nav-link">Transport</button>
	<div class="submenu">
	<table>
	<tr>
	<td style="">
	<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>
	</td>
	<td>
	<h1>Why Transport?</h1>
	<p>Transport is the key driver in carbon emissions and in order to prevent a climate catastrophe,
	we need to start looking towards less carbon intensive alternatives to the conventional car.
	This could include cycling, taking public transport, telecommuting, etc.</p>
	</td>
	</tr>
	</table>
	</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;

	}

	.nav-link {
	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.5s ease-in-out;
	transform-origin:top;
	}

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

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

	.submenu {
	position:absolute;
	top:13vh;
	left:0;
	background:var(--clr-light);
	color:var(--clr-dark);
	width:100%;
	height:50vh;
	transform:scale(1,0);
	transition: transform 0.4s ease-in-out 0.3s;
	transform-origin:top;
	}

	.submenu table {
	height:100%;
	width:70%;
	margin-left:15vw;
	opacity:0;
	pointer-events:none;
	transition:opacity 0.2s ease-in-out;
	}

	.submenu tr {
	width:100%;
	height:100%;
	}

	.submenu td {
	height:100%;
	width:50%;
	}

	.submenu ul {
	display:flex;
	flex-direction:column;
	gap:2vh;
	list-style:none;
	justify-content:center;
	height:100%;
	}

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

	.submenu h1 {
	font-size:2vw;
	text-align:center;
	}

	.submenu p {
	font-weight:400;
	font-size:1vw;
	text-align:center;
	padding-top:3vh;
	color:#555;
	line-height:1.6;
	}