tried some styling, still buggy though

index.html

@@ -1,11 +1,11 @@
 <ul class="nav site-nav" id="level0">
-    <li><a href=#>Lorem</a></li><!--
+    <li><a href=# class="first-item"><img src="img/placeholder-icon.png" height="55" alt="icon"><span>PET</span></a></li><!--
  -->
-    <li><a href=#>Ipsum</a></li><!--
+    <li><a href=# class="first-item"><img src="img/placeholder-icon.png" height="55" alt="icon"><span>OPA</span></a></li><!--
  -->
-    <li class=flyout>
+    <li class="flyout">
 
-        <a class=item href=#>Dolor</a>
+        <a class="first-item" href=#><img src="img/placeholder-icon.png" height="55" alt="icon"><span>ALU</span></a>
 
         <!-- Flyout -->
         <ul class="flyout-content nav stacked" id="level1">
@@ -63,21 +63,18 @@
                         </ul>
 
                     </li>
-                    <li><a href=#>Bar Baz</a></li>
+                    <li class="first-item"><a href=#>Bar Baz</a></li>
                 </ul>
 
             </li>
         </ul>
 
     </li><!--
  -->
-    <li><a href=#>Sit</a></li><!--
+    <li><a href=# class="first-item"><img src="img/placeholder-icon.png" height="55" alt="icon"><span>BOPP CPP</span></a></li><!--
  -->
-    <li><a href=#>Amet</a></li>
 </ul>
     <script type="text/javascript"
             src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js"></script>
     <link rel="stylesheet" href="styles.css">
 <script type="text/javascript" src="index.js"></script>
-
-

styles.css

@@ -4,7 +4,7 @@
 *{ margin:0; padding:0; }
 html{
     padding:5%;
-    font:1em/1.5 Georgia, serif;
+    font-family:"Avenir", Helvetica, serif;
     overflow-y:scroll;
 }
 ul{
@@ -30,8 +30,9 @@ a{
 .nav{
     list-style:none;
     margin-left:0;
-    width: 200px;
-    padding-right: 10px;
+    /* width: 200px; */
+    display: inline-block;
+    /* padding-right: 10px; */
 
 }
 .nav > li,
@@ -127,14 +128,13 @@ a{
  * Extends `.nav{}`
  */
 .site-nav{
-    font-size:0.75em;
-    font-family:sans-serif;
+    font-size: 15px;
 }
 .site-nav a{
     line-height:1;
     padding:1em;
-    background-color:#09f;
-    color:#fff;
+    background-color: #f1f2f2;
+    color: #868686;
     white-space:nowrap;
 }
 
@@ -148,8 +148,8 @@ a{
 .site-nav .flyout-alt:hover > a /* [1] */,
 
 .site-nav .clicked > a{
-    background-color:#BADA55;
-    color:#435704;
+    background-color:#e5e5e5;
+    color:#868686;
 }
 
 /**
@@ -183,7 +183,7 @@ a{
     /*border-width:1px 0 0 1px; */ /* [4] */
 }
 .site-nav .flyout-content a{
-    border-bottom-width:1px; /* [4] */
+    border-bottom-width:0px; /* [4] */
 }
 .site-nav .flyout-alt:hover > .flyout-content{
     /**
@@ -194,14 +194,66 @@ a{
 }
 
 .clicked a:after {
-    width: 0;
+    /* width: 0;
     height: 0;
     border-style: solid;
-    border-width: 15px 0 21px 8px;
-    border-color: transparent transparent transparent #bada55;
+    border-width: 24px 0 21px 8px;
+    border-color: transparent transparent transparent #f1f2f2;
+    border-color: red;
     line-height: 0px;
     position: absolute;
     display: inline-block;
-    left: -10px;
-    bottom: 0;
-}
+    left: -16px;
+    top: 0;
+    bottom: 0; */
+}
+
+.clicked a {
+  display: inline-block;
+	position: relative;
+	background: #e5e5e5;
+	border: 3px solid #ffffff;
+}
+.clicked a:after, .clicked a:before {
+	left: 100%;
+	top: 50%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+.clicked a:after {
+	border-color: rgba(241, 242, 242, 0);
+	border-left-color: #e5e5e5;
+	border-width: 20px;
+	margin-top: -20px;
+}
+.clicked a:before {
+	border-color: rgba(255, 255, 255, 0);
+	border-left-color: #ffffff;
+	border-width: 24px;
+	margin-top: -24px;
+}
+
+/* First items first (BIG) */
+
+.site-nav .first-item {
+  color: #283461;
+  font-weight: bold;
+  padding: 16px 32px;
+  /* margin-top: 5px; */
+  border:  3px solid white;
+}
+
+.site-nav .first-item img {
+  margin-right: 24px;
+}
+
+.site-nav .first-item span {
+  display: inline-block;
+  vertical-align: top;
+  padding-top: 24px;
+}