<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Classroom Corner</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {font-family: Arial;}
td {font-family: Arial; font-size: 10pt;}
th {font-family: Arial; font-size: 10pt;}
.dark_blue {color: #000099;}


/* Fixed sidenav, full height */
    .sidenav {
        height:auto;
        width: 200px;
        position: relative;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: "#eeffdd";
        overflow-x: hidden;
        padding-top: 20px;
    }

	
/* Style the sidenav links and the dropdown button */
        .sidenav a, .dropdown-btn {
            padding: 6px 8px 6px 16px;
            text-decoration: none;
            font-size: 20px;
            color: black;
            display: block;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            cursor: pointer;
            outline: none;
        }

		
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #ed7820;
}

/* Main content */
    .main {
        margin-left: 200px; /* Same as the width of the sidenav */
        font-size: 20px; /* Increased text to enable scrolling */
        padding: 0px 10px;
    }

    /* Add an active class to the active dropdown button */
    .active {
        background-color: #ace169;
        color: white;
    }

    /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
    .dropdown-container {
        display: none;
        background-color: #e6ef0c;
        padding-left: 8px;
    }

    /* Optional: Style the caret down icon */
    .fa-caret-down {
        float: right;
        padding-right: 8px;
    }

    /* Some media queries for responsiveness */
    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }

            .sidenav a {
                font-size: 18px;
            }
    }



</style>
</HEAD>
<BODY bgcolor="#CCCCFF" topmargin="0" bottommargin="0" background="../images/background/green058bg.jpg">

	
	<table width="680" height="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#eeffdd">
		<tr>
			<td height="120" valign="top" colspan="3">
				<!-- logo -->
				<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100" style="border-bottom: 1px solid blue;
    " bgcolor="#FFFFFF">
					<tr>
						<td valign="top" width="522"><a href="../"><img src="../images/fenghuaschool.jpg" width="472" height="100"></a></td>
						<td valign="middle">
							&nbsp;
						</td>
						<td width="134" bgcolor="#FFFFFF" background="../images/background/FH_bg3.jpg">
							<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
								<tr>
									<td height="5"></td>
								</tr>
								<tr>
									<td align="right" valign="top" height="82"><img src="../images/FH_logo3.jpg"></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
				<!-- logo end -->
			</td>
		</tr>
		<tr>
			<td valign="top" style="padding:20;" align="center" width="60%">
				<table width="100%">
					<tr></tr>
					<tr>
						<td width="20%"></td>
						<div class="sidenav">
							<a style="text-decoration:none" href="../../campusHighlights/campusHighlights.html"><b>教 学 园 地</b></a>
							<br />
							<div class="dropdown">
								<button class="dropdown-btn">
									2021
									<i class="fa fa-caret-down"></i>
								</button>
								<div class="dropdown-container">
									<a href="2021/campusHighlights2021spring.html">2021 Spring</a>
									<a href="campusHighlights.html">2021 Fall</a>
								</div>
							</div>
							<div class="dropdown">
								<button class="dropdown-btn">
									2020
									<i class="fa fa-caret-down"></i>
								</button>
								<div class="dropdown-container">
									<a href="2020/campusHighlights2020fall.html">2020 Fall</a>
								</div>
							</div>							
						</div>
						<td width="20%"></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>


	<script>
		/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
		var dropdown = document.getElementsByClassName("dropdown-btn");
		var i;

		for (i = 0; i < dropdown.length; i++) {
			dropdown[i].addEventListener("click", function () {
				this.classList.toggle("active");
				var dropdownContent = this.nextElementSibling;
				if (dropdownContent.style.display === "block") {
					dropdownContent.style.display = "none";
				} else {
					dropdownContent.style.display = "block";
				}
			});
        }



	</script>
</BODY>
</html>