JQuery UI Menu Scroll

[Galex55]

I'm using the native jquery ui menu and trying to get it to scroll. I found that it actually has this behavior built in (sort of). I'm not sure if it's intentional or not.JSFiddle Demo/////////////////////////////////// HTML ////////////////////////////////////////////<div id="container"> <ul id="menu"> <div id="scrollup"> <span class="ui-icon ui-icon-triangle-1-n"></span> </div> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 1</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 2</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 3</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 4</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 5</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 6</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 7</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 8</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 9</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 10</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 11</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 12</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 13</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 14</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 15</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 16</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 17</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 18</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 19</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 20</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 21</a></li> <li><a href="http://stackoverflow.com/questions/15736190/#">Item 22</a></li> <div id="scrolldown"> <span class="ui-icon ui-icon-triangle-1-s"></span> </div> </ul></div>/////////////////////////////////// CSS ////////////////////////////////////////////#container { height: 350px; background: #ccc;}#menu { max-height: 75%; width: 100px; padding: 25px 0; overflow: hidden; margin: 20px;}#menu #scrollup,#menu #scrolldown { position: absolute; width: 16px; height: 16px; top: 15px; left: 113px;}#menu #scrolldown { top: 311px;}/////////////////////////////////// JQUERY //////////////////////////////////////////$('#menu').menu().removeClass('ui-menu-icons');This is the best I can come up, and I'm not really happy with it. I've had to increase the top and bottom padding to allow for a larger scroll-able area. This itself isn't terrible but not ideal. My biggest concern is showing my users that this list is scroll-able. I've hacked in some display arrows using the jquery ui icons, but it doesn't quite feel right. By putting them on the right they mimic a scrollbar, but you can't click on them.Ideally what I'd like is for the arrows to be centered, but when you hover them the list is still scroll-able. By using a span I can achieve the positioning but then the text is visible underneath and just looks bad. By using a div it looks cleaner, but then the entire area isn't scroll-able.I'm looking for a better, cleaner, and more intuitive way to implement this.