Как я могу переместить элемент внутри другого элемента

Question

Привет! Я использую плагин Grails Navigation и, когда он генерирует меню, он помещает суб-навигацию под главное меню, но я делаю мое меню вертикальным, так что я не хочу, чтобы подменю во всем меню хочу его под активный элемент.

Пример: так создается меню и подменю

<ul class="mainmenu">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>
<ul class="submenu">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>

То, что я хочу, это:

<ul class="mainmenu">
   <li>item1
     <ul class="submenu">
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
     </ul>
   </li>
   <li>item2</li>
   <li>item3</li>
</ul>

Так как я не знаю, как заставить плагин Grails Nav делать это, я думаю, мне придется заставить jquery делать это после его генерации. Есть идеи?

<ч /> Edit

Таким образом, jquery, который я использовал из ответа ниже:

<script type="text/javascript"> 
$(function() {
        alert("hi");
        $(".subnavigation").appendTo($(".navigation li:navigation_active"));
      });
</script>
....
<ul class="navigation" id="navigation_tabs">
    <li class="navigation_first">Item 1</li>
    <li class="navigation_active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="navigation_last">Item 5</li>
</ul> 
<ul class="subnavigation" id="subnavigation_tabs">
    <li class="subnavigation_first">Sub 1</li>
    <li>Sub 2</li>
    <li class="subnavigation_last">Sub 3</li>
</ul>

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

Answer 1

Вы можете сделать это:

$(".submenu").appendTo($(".mainmenu li:first"));

В качестве альтернативы:

$(".mainmenu li:first").append($(".submenu"));

Или, чтобы поместить его под всех них (скрыть с помощью CSS):

$(".mainmenu li").append($(".submenu"));

Редактировать , для обновленного вопроса:

$(".subnavigation").appendTo($(".navigation li.navigation_active"));

Answer 2

Предполагая, что с активным вы имеете в виду зависание мыши.

$("ul.mainmenu li").hover(function() {
    $(this).append($("ul.submenu"))
})