Dropdown-CSS/index.css at main · DerianSeto/Dropdown-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/* It's ugly, but it works */ /*  */

a{ /* For looks */
	color: #5CFFFF;
}
	a:hover{ /* For looks */
		color: #FFFFFF;
	}


ul{
	transition: height 300ms; /* Transition the height property over 300 milliseconds */
	overflow: clip; /* Same as hidden, but allows space outside the div*/
	height: 0px; /* Initialize */

	/* For looks */
	width: 100%;
	list-style-type: none;
}
	li{
		transition: background-color 300ms; /* Transition the height property over 300 milliseconds */
		/* For looks */
		text-indent: 2%;
		width: 100%;
	}


body{ /* For looks */
	color: #EDFDFD;
	background-color: #073636;
	font-family: "Gill Sans", sans-serif;
}

	header{
		z-index: 1; /* Visual priority | Higher than content */

		/* For looks */
		width: 99%;
		position: absolute;
	}

		#TitleImage{ /* For looks */
			color: #FFFFFF;
		}

			#Title{ /* For looks */
				background-color: #00A6A6;
				width: 100%;
				padding: 20px 0px 20px 0px; /* Space from the border | Top, right, bottom, left */
				text-align: center;
				font-size: 34px;/* H1 size */
				border-radius: 25px 25px 0px 0px; /*Rounded corners | Top left, right, bottom right, left*/
			}

				.Mains{
					background-color: #036565;
						padding: 0px 0px 0px 8%; /* This list's distance from the sides | Top, right, bottom, left */
						margin: 0px;
						width: 92%;
						line-height: 1.5;
						text-align: left;
						border-radius: 0px 0px 25px 25px; /*Rounded corners | Top left, right, bottom right, left*/
						clear: both; /* Clears objects floating both left and right (Title and button) */
				}
					.Mains li:hover{ /* For looks */
						background-color: #052424;
					}
						.Mains .Insets li:hover{ /* For looks */
							background-color: #070E0E;
						}


				.Buttons{
						transition: background-color 300ms; /* Transition the height property over 300 milliseconds */
						/* For looks */
						border: none;
						color: #FFFFFF;
						width: 100%;
						padding: 20px 0px 20px 0px; /* Space from the border | Top, right, bottom, left */
						font-size: 34px;/* H1 size */
						background-color: #00A6A6;
				}

				.Insets{ /* For looks */
					background-color: #052424;
				}

				.MenuDropBtns{ /* For looks */
					width: 20%;
					height: 20%;
					float: left;
					clear: none;
				}
					#MenuDropBtn1:hover button{ /* For looks */
						background-color: #036565;
						color: #5CFFFF;
					}

					#MenuDropBtn2:hover button{ /* For looks */
						background-color: #036565;
						color: #5CFFFF;
					}

					#MenuDropBtn3:hover button{ /* For looks */
						background-color: #036565;
						color: #5CFFFF;
					}

					#MenuDropBtn4:hover button{ /* For looks */
						background-color: #036565;
						color: #5CFFFF;
					}

					#MenuDropBtn5:hover button{ /* For looks */
						background-color: #036565;
						color: #5CFFFF;
					}


	main{
		z-index: 0; /* Visual priority | Lower than header */

		/* For looks */
		position: absolute;
		top: 175px;
	}