Navigation with 2 layers / uls

Question

我想实现，这两个图层的li元素都是水平定位

:

情形1(用户悬停在主页):

Home / Kontakt
Home-Sub1 / Home_Sub2

案例2(用户悬停联系人):

Home / Kontakt
Kontakt_Sub1 / Kontakt_Sub / Kontakt_Sub3

我的导航的css代码:

#navigation ul.menu {
    list-style-type:none;
    list-style:none;
    /*overflow:hidden;*/
    width:980px;
}
#navigation ul li.expanded {
    list-style:none;
    list-style-type:none;
    padding:0;
    float:left;
    display:inline;
    height:32px;
}
#navigation ul.menu {
    width:100%;
    height:32px;
    border-bottom: 1px solid #cecbcd;
}
/* style list as navigation using float:left */
#navigation ul.menu li {
    padding:0;
    float:left;
    display:inline;
    height:32px;
    position:relative;
}
/* set distance from left corner to the first li item */
#navigation ul.menu li:first-child {
    margin-left:150px;
}
#navigation ul.menu li ul li:first-child {
    margin-left:0px;
}
#navigation ul.menu li ul {
    display:none;
    position:absolute;
    top:2em; 
    left: 1em; 
    float:left; 
    border:none;
}
#navigation ul.menu li:hover ul {
    display:block;
}
#navigation ul.menu li ul li {
    display:inline;
    background-image:none;
}
#navigation ul.menu li a {
    /*background-color:#ffffff; */
    font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
    text-decoration:none;
    color: #666666;
    height: 32px;
    background-image:none;
    display:block;
    padding-left:5px;
    padding-right:5px;
    float: left;
}
#navigation ul.menu li ul li a {
    /*background-color:#ffffff; */
    font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
    text-decoration:none;
    color: #666666;
    height: 32px;
    background-image:none;
    display:block;
    padding-left:5px;
    padding-right:5px;
    float: left;
}
#navigation ul.menu li ul li a:hover,
#navigation ul.menu li ul li.active-trail a.active-trail {
    /*background-color:#ffffff; */
    font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
    text-decoration:underline;
    color: #666666;
    height: 32px;
    background-image:none;
    display:block;
    padding-left:5px;
    padding-right:5px;
    float: left;
}
#navigation ul.menu li a:hover {
    font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
    text-decoration:none;
    color: #ffffff;
    height: 32px;
    background-image:url('../images/navi_active.png');
    background-position:center;
    background-repeat:no-repeat;
}
#navigation ul.menu li a.active,
#navigation ul.menu li.active-trail a.active-trail {
    font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
    text-decoration:none;
    color: #ffffff;
    height: 32px;
    background-image:url('../images/navi_active.png');
    background-position:center;
    background-repeat:no-repeat;
}

Answer 1

使用float:left或display:inline为li设置样式:

ul li {
  float: left;
}

或

ul li {
    display: inline; 
}