jQuery UI Menu Icon Fix

Simple CSS overrides to fix the positioning of icons in the jQuery UI menu widget.

HTML

<ul id="menu" class="fixed">
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>Zoom In</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</a></li>
  <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>Print...</a></li>
  <li>
    <a href="#">Playback</a>
    <ul>
      <li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>Prev</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-stop"></span>Stop</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-play"></span>Play</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>Next</a></li>
    </ul>
  </li>
</ul>

CSS

body {
    font-size: 0.8em;
}

.ui-menu {
    width: 150px;
}

/*
 * Fixes the icons to the left of the text. By default, they're too high.
 *
 */
.ui-menu .ui-icon {
    top: 0.27em;
}

/*
 * Fixes the sub-menu icon to the right of the text. By default it's too high
 * and it's positioned statically, so we need a margin on top.
 *
 */
.ui-menu .ui-menu-icon {
    margin-top: 0.1em;
}

JavaScript

$( "#menu" ).menu()