Question

我想实现，li元素的两个层都是水平放置的

像这样：

案例1（用户徘徊在主页）：

Home / Kontakt

Home-Sub1 / Home_Sub2

案例2（用户悬停kontakt）：

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

OR

ul li {
    display: inline; 
}

用2层/ uls导航

1 个答案: