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;
}

如何正确安排子级值？

Answer 1

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

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

<强> DEMO

Answer 2

试试这个：in this 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*/
 }

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

2 个答案: