Javascript 如何在水平菜单中排列子孩子

我有一个任务要从json文件中执行水平菜单。我创建了json文件。但是，在创建子孩子时，CSS不能正常工作。我希望子菜单是垂直的

css文件是

#wrapper {
    width:100%;
    height:500px;
}
h2 {
    color:#787878;
} 

#nav,
#nav ul {
    list-style: none;
    padding: 2px;

}
#menu {
    border-bottom: 1px solid #CCCCCC;
    border-spacing: 0;
    display: table;
    float: left;
    height: 25px;
    width: 100%;
}
#menu ul {
    margin: 0;
    padding: 0; 
}

#menu ul li a:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #ccc #ccc #FFFFFF;
    border-style: solid;
    border-width: 1px;
    padding-bottom: 0;
}

.nav-child {
    width:160px;
    display:block !important;
}
#menu ul li ul {
    border-radius:0px;
    border-color:#fff #ccc #ccc #ccc !important;
}
#menu ul li ul li:hover {
    border:0px;
}
#nav {
    float: left;
    height: 25px;

}
#nav> li {
    float: left;
}

#nav li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;

}

#nav ul {
    position: absolute;
    display: none;
    z-index: 999;
}

#nav ul li a {
    /*width: 80px;*/
}
#nav li:hover ul {
    display: block;
}
#nav {
    font-family: Arial;
    font-size: 12px;
    //background: #F8F8F8 ;
}
#nav > li > a {
    font-family: Verdana,Arial,sans-serif;
    font-style: normal;
    color:#787878 ;
    font-weight: bold;
}
#nav > li > a:hover { 
    /*color: #000;*/
}
#nav ul {
    background: #fff;
    border:1px solid #C0C0C0;
    border-radius:5px;
}
#nav ul li a {
    color: #000;
}
#nav ul li a:hover {
    background: #E0E0E0 ;
}
.logout {
    float:right;
    width:300px;    
}
.title {
    float:left;
    width:300px;
}

#footer {
    width:100%;
    height:100px;
    float:left;
}
.subchild-list {
    margin: 0 116px !important;
    position: absolute !important;
}

.child-list ul {
    display: none !important;
    position: absolute !important;
    z-index: 999 !important;
}
.child-list  li:hover ul {
    display: block !important;
}

---

如何正确排列子孩子的值

在

.nav child

中将

显示：block

更改为

内联block

，并对

.nav subchild

执行相同操作

.nav-child {
        width:160px;
        display:inline-block !important;
        }
.nav-subchild{
     display: inline-block !important;
}

试试这个：，也许你想要这样的东西

.subchild-list {
    margin:0;                     /*<-----make 0*/
    position: absolute !important;
    top:0;                        /*<-----0 from top*/
    right:-66px;                  /*<-----gets outside from the .childlist li*/
 }

 .child-list li {
    position:relative !important; /*<-----important*/
 }

.subchild列表{
边距：0；/*我编辑了您的JSFIDLE程序，您只需检查一下即可。当我将鼠标悬停在指令菜单及其子菜单上时，样式不正确。请帮助我完成此操作？提供详细信息，请告诉我什么样式？在选择子项时，缺少边框顶部。您可以在JSFIDLE上看到它