导航＆amp; Childs CSS格式

Question

很难用CSS格式化我的导航及其子节目。我希望每个孩子在页面上水平列出并在其父母下面，但是目前我只能让它们垂直移动。请查看我在link中的含义。

这是我的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 */