CSS

The context menu can be styled using CSS.

Default CSS Theme

This is the definition of the default theme ("menu_default") which is built in:

.menu_default_main { 
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  border: 1px solid #dddddd;
  background-color: white;
  padding: 0px;
  cursor: default;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAABCAIAAABG0om7AAAAKXRFWHRDcmVhdGlvbiBUaW1lAHBvIDEwIDUgMjAxMCAyMjozMzo1OSArMDEwMGzy7+IAAAAHdElNRQfaBQoUJAesj4VUAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAABGdBTUEAALGPC/xhBQAAABVJREFUeNpj/P//PwO1weMnT2RlZAAYuwX/4oA3BgAAAABJRU5ErkJggg==);
  background-repeat: repeat-y;
  -moz-box-shadow:0px 2px 3px rgba(000,000,000,0.3),inset 0px 0px 2px rgba(255,255,255,0.8);
  -webkit-box-shadow:0px 2px 3px rgba(000,000,000,0.3),inset 0px 0px 2px rgba(255,255,255,0.8);
  box-shadow:0px 2px 3px rgba(000,000,000,0.3),inset 0px 0px 2px rgba(255,255,255,0.8); 
}
.menu_default_main, .menu_default_main *, .menu_default_main *:before, .menu_default_main *:after { 
  box-sizing: content-box; 
}
.menu_default_title { 
  background-color: #f2f2f2;
  border-bottom: 1px solid gray;
  padding: 4px 4px 4px 37px; 
}
.menu_default_main a { 
  padding: 2px 2px 2px 35px;
  color: black;
  text-decoration: none;
  cursor: default; 
}
.menu_default_main a img { 
  margin-left: 6px;
  margin-top: 2px; 
}
.menu_default_item_text { 
  display: block;
  height: 20px;
  line-height: 20px; 
  overflow:hidden;
  padding-left: 2px;
  padding-right: 20px; 
}
.menu_default_main a:hover { 
  background-color: #f3f3f3; 
}
.menu_default_main div div { 
  border-top: 1px solid #dddddd;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-left: 28px; 
}
.menu_default_main a.menu_default_item_disabled { 
  color: #ccc 
}
.menu_default_item_haschildren.menu_default_item_haschildren_active { 
  background: #eeeeee;
  background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#e6e6e6));
  background: -webkit-linear-gradient(top, #efefef 0%, #e6e6e6);
  background: -moz-linear-gradient(top, #efefef 0%, #e6e6e6);
  background: -ms-linear-gradient(top, #efefef 0%, #e6e6e6);
  background: -o-linear-gradient(top, #efefef 0%, #e6e6e6);
  background: linear-gradient(top, #efefef 0%, #e6e6e6);
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#efefef", endColorStr="#e6e6e6"); 
}
.menu_default_item_haschildren a:before { 
  content: ''; 
  border-width: 6px; 
  border-color: transparent transparent transparent black; 
  border-style: solid; 
  width: 0px; 
  height:0px; 
  position: absolute; 
  right: 5px; 
  margin-top: 4px; 
}
.menu_default_item_icon { 
  position: absolute; 
  top:0px; 
  left: 0px; 
  padding: 2px 2px 2px 8px; 
}
.menu_default_item a i { 
  height: 20px;
  line-height: 20px; 
}

JavaScript

You can apply a custom CSS theme using DayPilot.Menu.theme property