Beautiful top-menu

css/style.css

@@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&display=swap');
+
+body {
+	padding: 0;
+}
+
+.menu {
+	position: fixed;
+	width: 100%;
+	z-index: 100;
+	font-size: 18px;
+	font-family: 'Exo 2', sans-serif;
+	background-color: #cecdd9;
+	color: #514b90;
+	top: 0;
+	left: 0;
+}
+.menu ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	box-shadow: 0 5px 5px gray;
+}
+.menu ul li {
+	color: #514b90;
+	display: inline-block;
+	position: relative;
+	text-transform: uppercase;
+	padding-top: 5px;
+	padding-left: 5px;
+	padding-right: 5px;
+	padding-bottom: 5px;
+	transition: color 0.45s ease-in-out;
+}
+.menu ul li a {
+	color: #514b90;
+	text-decoration: none;
+}
+.menu ul.top-menu > li {
+	padding-left: 10px;
+	font-size: 20px;
+}
+
+.androit-green { color: green; }
+.androit-white { color: white; }
+
+.menu ul.top-menu > li > a {
+	color: #514b90;
+	transition: color 0.45s ease-in-out;
+}
+.menu ul.top-menu > li:hover > a {
+	color: #0e0939;
+	transition: color 0.45s ease-in-out;
+}
+
+.dropdown-menu {
+	list-style: none;
+	position: absolute;
+	left: 0;
+	width: 200px;
+	visibility: hidden;
+	backface-visibility: hidden;
+	opacity: 0;
+	z-index: 200;
+	font-size: 18px;
+	background-color: #aea9c5;
+	border-radius: 5px;
+	transform-origin: left top;
+	transform: perspective(600px) rotateX(-90deg);
+	transition: 0.6s ease-in-out;
+}
+.dropdown-menu li {
+	display: block !important;
+}
+.top-menu > #myproj-item:hover .dropdown-menu {
+	visibility: visible;
+	opacity: 1;
+	transform: perspective(600px) rotateX(0deg);
+}
+
+.main-content {
+	padding-top: 40px;
+	font-size: 18px;
+	font-family: sans-serif;
+}