0
@@ -7,10 +7,12 @@
0
     <li><%= link_to "Update your account", :controller => 'users', :action => 'show', :id => current_user %></li>
0
     <li id="select">
0
       <a class="trigger" id="cog" href="#">&nbsp;</a>
0
-      <ul id="options" style="display:none;">
0
-        <li><a href="#" title="title">Test option</a></li>
0
-        <li><a href="#" title="title">Other option</a></li>
0
-      </ul>
0
+      <div id="optgroup" style="display: none">
0
+        <ul id="options">
0
+          <li><%= check_box_tag 'show_todays_comments' %> Show only todays comments</li>
0
+          <li><a href="#" title="title">Other option</a></li>
0
+        </ul>
0
+      </div>
0
     </li>
0
   </ul>
0
 </div>

0
@@ -4,7 +4,7 @@ DropMenu.prototype = {
0
   initialize: function(element) {
0
     this.menu = $(element);
0
     this.trigger = document.getElementsByClassName('trigger', this.menu)[0];
0
-    this.options = $('options');
0
+    this.options = $('optgroup');
0
     this.focused = false;
0
     
0
     Event.observe(this.trigger, 'click', this.onTriggerClick.bindAsEventListener(this));
0
@@ -13,6 +13,8 @@ DropMenu.prototype = {
0
   },
0
   
0
   onTriggerClick: function() {
0
+    clearTimeout(this.timeout);
0
+    this.options.setStyle({opacity: 1});
0
     Element.toggle(this.options);
0
   },
0
   
0
@@ -22,7 +24,7 @@ DropMenu.prototype = {
0
   
0
   onMenuBlur: function() {
0
     this.focused = false;
0
-    setTimeout(this.fadeMenu.bind(this), 400);
0
+    this.timeout = setTimeout(this.fadeMenu.bind(this), 400);
0
   },
0
   
0
   fadeMenu: function() {

0
@@ -307,37 +307,38 @@ input[type='text']:focus, textarea:focus {
0
   outline: none;
0
 }
0
 
0
-#select #options {
0
+#select #optgroup {
0
   position: absolute;
0
   top: 38px;
0
   left: 2px;
0
-  width: 200px;
0
-  background: #eee;
0
+  width: 240px;
0
   z-index: 9999;
0
-  padding: 0;
0
+  padding: 0 5px 5px 0;
0
   margin: 0;
0
+  background: url(../images/shadow.png) bottom right no-repeat;
0
+}
0
+
0
+#select #options {
0
+  background: #eee;
0
   border: 5px solid #fff;
0
 }
0
 
0
 #select #options li {
0
   display: block;
0
   margin: 0;
0
+  padding: 5px;
0
+  border-bottom: 1px dotted #ccc;
0
+  color: #333;
0
 }
0
 
0
 #select #options a {
0
   float: none !important;
0
-  display: block;
0
-  padding: 5px;
0
   margin: 0;
0
   border: none;
0
-  border-bottom: 1px dotted #ccc;
0
+  display: inline;
0
+  padding: 0;
0
 }
0
 
0
-#select #options a:hover {
0
-  background: #E9F7F8;
0
-  color: #333;
0
-  text-shadow: 2px 2px #fff;
0
-}
0
 
0
 
0
 /*