Навигация с 2 слоями / улс - PullRequest
Новая
       4

Навигация с 2 слоями / улс

1 голос
/ 03 августа 2011

Я хочу добиться, чтобы оба слоя li-элементов располагались горизонтально

, например:

Случай 1 (пользователь наводит курсор на Home): 

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

1 Ответ

1 голос
/ 03 августа 2011

используйте float:left или display:inline, чтобы оформить li следующим образом: 

ul li {
  float: left;
}

ИЛИ 

ul li {
    display: inline; 
}
...