Как мне расположить меню второго уровня относительно меню родителя / первого уровня? - PullRequest
Новая
       8

Как мне расположить меню второго уровня относительно меню родителя / первого уровня?

0 голосов
/ 04 августа 2011

Я сейчас использую позицию: абсолютная;для меню второго уровня, потому что, когда я использую положение: относительный;меню первого уровня не работает (после того, как наведенный элемент является переносом строки?)

Но я хочу добиться того, чтобы отображаемое меню второго уровня располагалось относительно наведенного элемента в меню первого уровня (непосредственнопод ним, а также по горизонтали)

Мое меню в настоящее время выглядит так: 

Home / Test / News
Test_Sub1 / Test_Sub2 / Test_Sub3

Но должно быть 

Home / Test / News
       Test_Sub1 / Test_Sub2 / Test_Sub3

Вот мой код CSS 

#navigation ul.menu {
list-style-type:none;
list-style:none;
/*overflow:hidden;*/
width:980px;
}

#navigation li {
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 */


/* 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:32px; left: 10em; float:left; border:none;}
#navigation ul.menu li:hover ul {display:inline;}
#navigation ul.menu li:hover ul li {height:45; padding-top:8px; float:left; position: relative;}
#navigation ul.menu li:hover ul li a {float:left;}
#navigation ul.menu li ul li {display:inline; background-image:none; float:left; position:relative; left: 5em; }
#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;

}

div.region-header ul.menu {
display:none;
}

1 Ответ

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

Попробуйте: http://jsfiddle.net/rathoreahsan/3NRu4/

Редактировать:

Я выяснил ваш код:

вы определили: 

#navigation ul.menu li:hover ul {display:inline;}

Ченгеэто: 

#navigation ul.menu li:hover ul {display:block;}

Также в этой строке 

#navigation ul.menu li ul li {display:inline; background-image:none; float:left; position:relative; left: 5em; }

Удалите left: 5em, чтобы получить такой результат: http://jsfiddle.net/rathoreahsan/GFURU/

Отредактировано:

Более подробно в этой строке: 

#navigation ul.menu li ul {display:none; position:absolute; top:32px; float:left; border:none; background:red; left: 10em;}

Удалить left: 10em, чтобы получить ul относительную позицию

См. Демонстрацию: http://jsfiddle.net/rathoreahsan/rTsAE/

Надеюсь, это все исправит.

...