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

Question

我有一个任务是从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;
}

如何正确排列子项值？

- Nithin Viswanathan

Answer 1

将.nav-child中的display:block更改为inline-block，并对.nav-subchild执行相同操作。

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

演示

- Sowmya

Answer 2

尝试使用这个链接: 在这个fiddle中，也许你想要类似这样的东西。

.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*/
 }

- Jai

---

我编辑了你的jsfiddle程序，你可以检查一下。当我鼠标悬停在指令菜单及其子菜单上时，样式显示不正确。请帮我解决这个问题好吗？ - Nithin Viswanathan

请详细说明：使用何种风格？ - Jai

在选择子元素时，border-top丢失了。您可以在jsfiddle上看到它。 - Nithin Viswanathan