updates to metacode select within topic card

app/assets/javascripts/src/Metamaps.js

@@ -766,7 +766,7 @@ Metamaps.TopicCard = {
                 selectingMetacode = true;
                 $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
                 $('.metacodeSelect').show();
-                $('.metacodeSelect li').click(function () {
+                $('.metacodeSelect li li').click(function () {
                     selectingMetacode = false;
                     var metacodeName = $(this).find('.mSelectName').text();
                     var metacode = Metamaps.Metacodes.findWhere({

app/assets/stylesheets/base.css

@@ -322,39 +322,46 @@ cursor: pointer;
 }
 .CardOnGraph .metacodeSelect {
   display:none;
-  width:100%;
+  width:200px;
   z-index: 2;
   position: absolute;
   background: #EAEAEA;
-  height: 150px;
+  left: 300px;
 }
 .CardOnGraph .metacodeSelect ul {
-font-style: italic;
-font-family: 'vinyl';
-text-transform: uppercase;
-position: absolute;
-line-height: 36px;
-font-size: 20px;
-display:block;
-width: 100%;
-margin:0;
-padding: 0;
-list-style:none;
-height:150px;
-overflow:hidden;
+  position: relative; 
+  line-height: 14px;
+  font-size: 14px;
+  display:block;
+  width: 100%;
+  margin:0;
+  padding: 0;
+  list-style:none;
+  border: 1px solid #BDBDBD;
 }
 .CardOnGraph .metacodeSelect ul li {
-background-color: #EAEAEA;
-width:100%;
-border-bottom:1px solid #AAAAAA;
+background-color: #F5F5F5;
 cursor:pointer;
+position: relative;
+padding: 9px 12px;
 }
 .CardOnGraph .metacodeSelect ul li:hover {
-background-color: #F8F8F8;
+background-color: #E0E0E0;
 }
 .CardOnGraph .metacodeSelect ul li img, .CardOnGraph .metacodeSelect ul li .mSelectName {
 float:left;
 }
+.CardOnGraph .metacodeSelect ul ul {
+  display:none;
+  position: absolute;
+  left: 200px;
+  top: 0;
+  max-height: 270px;
+  overflow-y: auto;
+}
+.CardOnGraph .metacodeSelect li:hover ul {
+  display: block;
+}
 
 .CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip {
   display:block;

app/views/layouts/_templates.html.erb

@@ -193,6 +193,7 @@
             <div class="linkItem icon">
                 <div class="metacodeTitle {{metacode_class}}">{{metacode}}</div>
                 <div class="metacodeImage" style="background-image:url({{imgsrc}});" title="click and drag to move card"></div>
+                <div class="metacodeSelect">{{{metacode_select}}}</div>
             </div>
             <div class="linkItem contributor">
                 <img src="/assets/user.png" class="contributorIcon" width="32" height="32" />
@@ -209,7 +210,6 @@
             <div class="linkItem mapPerm {{mk_permission}}" title="{{permission}}"></div>
             <div class="clearfloat"></div>
         </div>
-        <div class="metacodeSelect">{{{metacode_select}}}</div>
         <div class="scroll">
             <div class="desc">
                 <span class="best_in_place best_in_place_desc" data-url="/topics/{{id}}" data-object="topic" data-nil="{{desc_nil}}" data-attribute="desc" data-type="textarea">{{desc}}</span>