added flexbox demo

when hover on neon443, dont click goes purple

style.css

@@ -2,6 +2,8 @@
 	* {
 		box-sizing: border-box;
 		margin: 0px;
+		font-family: system-ui;
+		transition: all 0.2s;
 	}
 	b {
 		color: #ff6200
@@ -12,7 +14,6 @@
 	body {
 		background-color: #ddd;
 		color: #222;
-		font-family: system-ui;
 	}
 	p {
 		font-size: 20px;
@@ -74,8 +75,7 @@
 	.barItem * {
 		color: #222;
 		text-decoration: none;
-		display:block;
-		transition: all 0.2s;
+		display: block;
 		font-size: 16px;
 		padding: 12px;
 	}
@@ -83,7 +83,7 @@
 		font-size: 20px;
 		padding: 9px;
 	}
-	.barItem a:hover {
+	.barItem a:hover dropbtn:hover {
 		background-color: #111;
 		color: #eee;
 		
@@ -91,6 +91,37 @@
 		-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
 		box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
 	}
+	.bar:has(#barItem1:hover) #barItem2 {
+		background: purple;
+	}
+	
+	/* Bar dropdown styling*/
+		.dropbtn {	
+			border: none;
+			outline: none;
+		}
+		.dropbtn:hover .drop-content {
+			display: block;
+			background-color: red;
+			z-index: 100;
+		}
+		.drop-content {
+			display: none;
+			position: absolute;
+			z-index: -1;
+		}
+		.drop-content * {
+			float: none;
+			text-decoration: none;
+			display: block;
+		}
+		.drop-content a:hover {
+			background-color: #ddd;
+		}
+		.drop-content {
+			display: block;
+		}
+	/* Bar dropdown styling*/
 /* Bar styling*/
 
 @media (prefers-color-scheme: dark) {
@@ -123,4 +154,18 @@
 	p {
 		width: 100%;
 	}
+}
+
+/* flexbox waffle */
+.flexContainer {
+	height: 300px;
+	display: flex;
+}
+
+.flexItem {
+	margin: 10px;
+	background: orangered;
+	color: white;
+	flex-grow: 1;
+	background: purple;
 }