неупорядоченный список HTML с неупорядоченным списком внутри. Завернуты рядом друг с другом

Question

Я получаю неупорядоченный список по смс, который я хочу оформить.Работает хорошо, но только для первого <li id="link-18"> элемента.Моя цель состоит в том, чтобы стилизовать блоки <ul> полностью, как в первом.См. http://jsfiddle.net/UyrdS/3/ (вторая и третья ссылка показывает переключенный блок <ul> не сверху)

Если щелкнуть по второй ссылке (уровень 2, два), переключаемый новый блок <ul> отображается рядом с навигацией, но не сверху, как это делает уровень 1, который связывает один со своим дочерним элементом <ul>

Answer 1

Вы можете изменить свой CSS, чтобы создать хорошее подменю

nav ul>li>ul {
  display: none;
  margin-left:2em;
}

См. Пример на http://jsfiddle.net/WrcMX/

Answer 2

Я думаю это то, что вы хотели

alllinks = $("ul>li>ul");
$('nav a').on('click', function(e) {
    alllinks.hide(); //First hide all the links
    e.preventDefault();
    if ($(this).parent().children('ul').size() > 0) {
        $(this).parent().children('ul').toggle();
    }
});

Answer 3

Я сдался. Я довольно худший следователь :) Спасибо за ответы. Слава вам всем за то, что вы тратите свое время. Эта скрипка самая близкая к моему вопросу.

http://jsfiddle.net/UyrdS/6/

Но это не динамично. Он имеет статическую ширину. Это все еще проблема.