menu.css

/*
 *
 * extensions of standard menu style definitions, see master style sheet for more menu related styles.
 *
 */

ul#menu-bar
/*top level menu*/

  {
  font: system;
  behavior: menu-bar;
  flow: horizontal;
  color: windowtext;
  margin: 0;
  margin-left: -2em;
  var(menu-item-hover): #FEEEAE;
  var(menu-item-hover-border): #D9B526;
  var(menu-popup-back): #DCE6FB;
  var(menu-popup-border): #52668E;
}

ul#menu-bar>li
/* menu item in menu bar */

  {
  display: block;
  margin: 0;
  white-space: nowrap;
  width: max-intrinsic;
  display: block;
  flow: horizontal;
}

ul#menu-bar>li {
  border: 1dip solid transparent;
  padding: 2dip 8dip;
}

ul#menu-bar>li:hover
/* current menu item in menu bar */

  {
  background: color(menu-item-hover);
  border-color: color(menu-item-hover-border);
}

ul#menu-bar>li:current:owns-popup
/* current menu item in menu bar in focus - showing popup menu */

  {
  background-color: color(menu-popup-back);
  border-color: color(menu-popup-border);
}

ul#menu-bar>li>menu {
  prototype: RootPopupMenu url(menu-vs.tis);
  border: 1dip solid color(menu-popup-back);
  margin-top: -1dip;
}

menu
/* popup menu */

  {
  font: system;
  font-rendering-mode: classic;
  behavior: menu;
  /*is a menu*/
  flow: vertical;
  display: none;
  margin: 0;
  padding: 1dip;
  max-width: max-intrinsic;
  /*min-width: max-intrinsic;*/
  border: 1dip solid color(menu-popup-back);
  background: color(menu-popup-back);
  color: windowtext;
  margin: 0;
  /* to offset it from parent li */
}

menu menu
/* secondary popup menu */

  {
  max-width: max-intrinsic;
  border-color: color(menu-popup-border);
  margin: 0 1dip;
}

/* menu item in popup menus */

menu li {
  width: *;
  display: block;
  flow: horizontal;
  padding-left: 24dip;
  /* room for icon */
  padding-right: 12dip;
  /* room for the arrow */
  padding-top: 4dip;
  padding-bottom: 4dip;
  foreground-repeat: no-repeat;
  foreground-position: 2dip 50%;
  color: windowtext;
}

menu li:rtl {
  width: *;
  padding-right: 24dip;
  /* room for icon */
  padding-left: 12dip;
  /* room for the arrow */
  foreground-repeat: no-repeat;
  foreground-position-right: 2dip;
  foreground-position-top: 50%;
  text-align: right;
  color: windowtext;
}

menu li:disabled {
  color: graytext;
  foreground-image: none;
}

/* accesskey label (span) */

menu li span.accesskey {
  display: block;
  width: max-intrinsic;
  white-space: nowrap;
  margin-left: *;
  /* spring to attach it to the right */
  padding-left: 1em;
  color: threedshadow;
}

menu li:current span.accesskey {
  color: #FFD700;
}

/* menu with single <menu> inside - submenu */

menu li:has-child-of-type(menu) {
  foreground-image: url(stock:arrow-right);
  /* that arrow */
  foreground-repeat: no-repeat;
  foreground-position-top: 50%;
  foreground-position-left: auto;
  foreground-position-right: 4dip;
}

menu li:has-child-of-type(menu):rtl {
  foreground-image: url(stock:arrow-left);
  /* that arrow */
  foreground-repeat: no-repeat;
  foreground-position-right: auto;
  foreground-position-left: 4dip;
}

/* current menu item */

menu li:hover:owns-popup, menu li:current {
  background: color(menu-item-hover);
  border-color: color(menu-item-hover-border);
}

/* menu separator */

menu hr {
  margin: 2dip;
}