main.css

/*
  ______________________________________________________________________________________________
 |                                                                                              |
 |  Copyright 2024 ag-sanjjeev                                                                  |
 |                                                                                              |
 |  The source code is licensed under MIT-style License.                                        |
 |  The usage, permission and condition are applicable to this source code as per license.      |
 |  That can be found in LICENSE file or at https://opensource.org/licenses/MIT.                |
 |______________________________________________________________________________________________|

*/

/* Multi level dropdown menu 1 */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(30deg, #4CAF50, #1E88E5);
}

nav {	
	display: inline;	
	width: 100%;
}

nav a {
	text-decoration: none;
	color: white;
	font-size: 1.25em;
}

nav .f-left {
	padding: 1em 2em;
	float: left;
	display: flex;
	gap: 1.5em;
}

nav .f-right {
	padding: 1em 2em;
	float: right;	
	font-size: 1.25em;
}


nav .f-right summary {
	list-style: none;
	font-style: normal;
	color: white;
}

nav summary::after {
	content: '+';
}

nav .f-right details {
	position: relative;
}

nav .f-right ul {
	list-style: none;
	position: absolute;	
	right: 100%;
	background: white;
	width: max-content;
	padding: 10px 20px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;	
	border-bottom-left-radius: 10px;	
	box-shadow: 12px -12px 12px 3px rgba(0,0,0,0.1);
}

nav .f-right ul li {
	padding: 5px;
}

nav .f-right ul a {
	color: black;
	color: black;
	font-size: 1em;
	text-transform: capitalize;
}

nav .f-right ul summary {
	color: black;
}