Навигация и форматирование CSS для детей

Question

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

Это мой CSS, я добавил несколько аннотаций, которые я сделал до сих пор:

/* @group Navigation */

#main_navigation {
    z-index: 200;
}

nav#main_navigation ul.sub-menu {                           /* Hides sub chids to begin when opened */
    display: none;

}

nav#main_navigation li.open>ul.sub-menu {                   /* Sub Child layout and display */
    display: inline;

}

nav#main_navigation {
    background-color: rgba(35,35,34,0.98);
    display: none;                                          /* Makes main nav hidden to begin */
    padding: 20px;
    font-size: 1.2em;
    z-index: 99;
    position: absolute;
    width: 100%;
    box-shadow: -1px 2px 3px rgba(0,0,0,0.54);
}

nav#main_navigation ul {                                    /* Removes bullet list formatting */
    list-style: none;
    padding: 0;
    margin: 0;
}

nav#main_navigation>ul {
}

nav#main_navigation>ul>li>ul {
}

nav#main_navigation a {
    text-decoration: none;
    color: #CFCFC8;
}

nav#main_navigation>ul>li, nav#main_navigation>ul>li>a {
    display: inline;                                        /* Main Nav - inline=horizontal, block=vertical */
    float: left;                                        
}

nav#main_navigation>ul>li>a {
    padding: 5px 12px;
    -webkit-transition-duration: 175ms;
}

nav#main_navigation a.current {
    background-color: rgba(256, 256, 256, 0.1); 
}

nav#main_navigation a:hover {
    background-color: rgba(256, 256, 256, 0.25);
}

nav#main_navigation a.current, nav#main_navigation a:hover {
    color: #fff;
}

nav#main_navigation>ul>li {                                 /* Main Nav bottom border colour */
    position: inline; /*relative*/
    border-bottom: 0px solid #2e2e2b;
}

nav#main_navigation>ul>li:last-child {
    border-bottom: none;
}

nav#main_navigation ul li.hasChild>a:after {                /* Font Awesome arrow */
  font-family: 'FontAwesome';
  content: '\f105';
  margin-left: 8px;
}

nav#main_navigation ul ul, 
nav#main_navigation ul ul ul, 
nav#main_navigation ul ul ul ul, 
nav#main_navigation ul ul ul ul ul {
    display: none;
}


nav#main_navigation ul ul {
}

nav#main_navigation ul ul li a {
    display: inline;
    float: left;
    position: relative;
    top: 20px;
    padding: 5px 12px;
}

nav#main_navigation ul ul li a {
    padding-left: 24px;
    display: inline;
    float: left;
}

nav#main_navigation ul ul ul {
}

nav#main_navigation ul ul ul li a {
    padding-left: 36px;
    display: inline;
    float: left;
}

/* @end */