popup menu с большим количеством элементов

Столкнулся с проблемой. При первом открытии меню по горизонтали занимает весь экран.
Как правильно сделать меню с несколькими колонками?
Нужно поведение, как у стандартного меню — чтобы элементы, которые не помещаются по вертикали сдвигались в следующий ряд.

пример кода:

<html>
  <head>
  <style>
    @import url(std-menu.css);

    menu
    {
      flow: v-flow;
      overflow: auto;
    }

    .with-popup-menu
    {
      behavior:popup-menu;
      border:1px dotted red;
      background-color: #FFFAFA;
      padding: 4px;
      width:max-intrinsic;
    }

    .with-popup-menu:hover
    {
      background-color: #FFAFAF;
    }

    .with-popup-menu:owns-popup
    {
      border:1px solid red;
      background-color: #FF0000;
      color: #FFFFFF;
    }
    
    .with-popup-menu.and-hover
    {
      behavior: popup-menu hover-click;
    }
    
  </style>
  </head>

<body>

<div class ="with-popup-menu" align-popup="right" >
  Click here to see the menu
  <menu style="height: 500px;">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
    <li>item 16</li>
    <li>item 17</li>
    <li>item 18</li>
    <li>item 19</li>
    <li>item 20</li>
    <li>item 21</li>
    <li>item 22</li>
    <li>item 23</li>
    <li>item 24</li>
    <li>item 25</li>
    <li>item 26</li>
    <li>item 27</li>
    <li>item 28</li>
    <li>item 29</li>
    <li>item 30</li>
    <li>item 31</li>
    <li>item 32</li>
    <li>item 34</li>
    <li>item 35</li>
    <li>item 36</li>
    <li>item 37</li>
    <li>item 38</li>
    <li>item 39</li>
    <li>item 40</li>
    <li>item 41</li>
    <li>item 42</li>
    <li>item 43</li>
    <li>item 44</li>
    <li>item 45</li>
    <li>item 46</li>
    <li>item 47</li>
    <li>item 48</li>
    <li>item 49</li>
    <li>item 50</li>
    <li>item 51</li>
    <li>item 52</li>
    <li>item 53</li>
    <li>item 54</li>
    <li>item 55</li>
    <li>item 56</li>
    <li>item 57</li>
    <li>item 58</li>
    <li>item 59</li>
  </menu>
</div>

</body>
</html>

	От:	QUvalda
	Дата:	11.11.10 20:06
	Оценка: