diff --git a/app/main/assets/css/app.css.scss b/app/main/assets/css/app.css.scss
index bff022c..e70efba 100644
--- a/app/main/assets/css/app.css.scss
+++ b/app/main/assets/css/app.css.scss
@@ -1,32 +1,6 @@
 // Place your apps css here
 @import "susy";
 
-.tooltip {outline:none; }
-.tooltip strong {line-height:30px;}
-.tooltip:hover {text-decoration:none;}
-.tooltip span {
-    z-index:10;display:none; padding:14px 20px;
-    margin-top:-30px; margin-left:28px;
-    width:150px; line-height:16px;
-}
-.tooltip:hover span {
-    display:inline; position:absolute; color:#111;
-    border:1px solid #DCA; background:#fffAF0;
-}
-.callout {
-  z-index:20;
-  position:absolute;
-  top:30px;
-  border:0;
-  left:-12px;
-}
-
-/*CSS3 extras*/
-.tooltip span
-{
-    border-radius:4px;
-    box-shadow: 5px 5px 8px #CCC;
-}
 
 $susy: (
   columns: 24 ,
diff --git a/app/main/assets/css/menu.css b/app/main/assets/css/menu.css
new file mode 100644
index 0000000..9efc167
--- /dev/null
+++ b/app/main/assets/css/menu.css
@@ -0,0 +1,112 @@
+/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
+ * Dropdowns by Patrick Griffiths and Dan Webb.
+ * http://carroll.org.uk/sandbox/suckerfish/bones2.html
+
+http://greengeckodesign.com:8880/menumatic/demos/vertical/index.htm
+
+
+ */
+
+/* ----[ LINKS ]----*/
+
+/* all menu links */
+#nav a {
+	text-decoration:none;
+	display:block;
+	padding:10px 20px;
+	background-color:#fff ;
+	-moz-border-radius: 7px;
+	-webkit-border-radius: 7px;
+}
+
+/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
+#nav a{
+	margin:0;
+}
+
+/* All menu links on hover or focus */
+#nav a:hover, #nav a:focus {
+	background-color:#F6C739 ;
+	color:#FFF;
+}
+
+/* sub menu links on hover or focus */
+#nav li a:hover,
+#nav li a:focus{
+	background-color:#F6C739 ;
+	color:#FFF;
+}
+
+/* ----[ OLs ULs, LIs, and DIVs ]----*/
+
+/* All submenu OLs and ULs */
+#nav ol, #nav ul {
+	/*border around submenu goes here*/
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+	background:#fff;
+	border:1px solid #C3D46A;
+	left:0;
+}
+
+/* All ULs and OLs */
+#nav, #nav ul, #nav ol {
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	line-height: 1em;
+}
+
+/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
+#nav li {
+	/*great place to use a background image as a divider*/
+	display:block;
+	list-style:none;
+	position:relative;
+}
+
+/* main menu ul or ol elment */
+#nav{
+	display:block;
+	position: absolute;
+	list-style:none;
+	margin:0 0 0 -280px;
+	width:186px;
+	z-index:5;
+	top:60px;
+	left:50%;
+	text-align: right;
+	display:block;
+}
+
+
+
+/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
+#nav li li{	float:none; }
+
+#nav li li a{ /* Just submenu links*/
+	position:relative;
+	float:none;
+}
+
+#nav li ul { /* second-level lists */
+	position: absolute;
+	width: 10em;
+	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
+}
+
+/* third-and-above-level lists */
+#nav li ul ul { margin: -1em 0 0 -1000em; }
+#nav li:hover ul ul {	margin-left: -1000em; }
+
+ /* lists nested under hovered list items */
+#nav li:hover ul{	margin-left: 186px; margin-top:-2.5em;}
+#nav li li:hover ul {	margin-left: 10em; }
+
+/* extra positioning rules for limited noscript keyboard accessibility */
+#nav li a:focus + ul {  margin-left: 186px; margin-top:-2.5em; }
+#nav li li a:focus + ul { left:186px; margin-left: 1010em; margin-top:-2.5em;}
+#nav li li a:focus {left:186px;  margin-left:1000em; width:10em;  margin-top:-2.5em;}
+#nav li li li a:focus {left:186px; margin-left: 2010em; width: 10em;  margin-top:-2.5em;}
+#nav li:hover a:focus{ margin-left: 0; }
+#nav li li:hover a:focus + ul { margin-left: 10em; }
diff --git a/app/main/views/classes/index.html b/app/main/views/classes/index.html
index 4e58293..bc6f8e4 100644
--- a/app/main/views/classes/index.html
+++ b/app/main/views/classes/index.html
@@ -4,14 +4,21 @@
 <:Body>
   <div class="classes">
     <h4> Classes </h4>
-     {{page._classes.each do |clas| }}
-      <div class="one-class tooltip">
-        {{ clas._name }}
-        <span>
-          {{clas._name}}<br/>
-          -------------- <br/>
-          {{variables(clas).join("\n") }}
-        </span>
-      </div>
-     {{end}}
+    <div class="one-class">
+      <ul id="nav">
+       {{page._classes.each do |clas| }}
+         <li>
+           <a href="#">{{ clas._name }}</a>
+           <ul>
+             <li><a href="#">Echeneis</a></li>
+             <li><a href="#">Phtheirichthys</a></li>
+             <li><a href="#">Remora</a></li>
+             <li><a href="#">Remorina</a></li>
+
+             <li><a href="#">Rhombochirus</a></li>
+           </ul>
+         </li>
+       {{end}}
+     </ul>
+   </div>
   </div>