Помогите пожалуйста разобраться с меню.
Мне нужно сделать меню как на сайте , только иерархическое, вида
В общем то получилось, но вот проблемы: почему то он переносит меню в две стоки, при наведении на пункт меню страничка прыгает, и еще при наведениии на слово оно должно менять цвет на красный, этого не происходит (в выпадающих подменю цвет меняется).
Вот коды:
css
ПОМОГИТЕ ПОЖАЛУЙСТА!
С таким меню работаю впервые, может в коде что-то лишнее? Замучилась уже, а сроки поджимают
Мне нужно сделать меню как на сайте , только иерархическое, вида
| Код |
|---|
ul id="horizontal-multilevel-menu"> <li>Элемент меню <ul> <li>Элемент меню</li> <li>Элемент меню</li> <li>Элемент меню</li> </ul> </li> li>Элемент меню</li> li>Элемент меню</li> /ul> |
В общем то получилось, но вот проблемы: почему то он переносит меню в две стоки, при наведении на пункт меню страничка прыгает, и еще при наведениии на слово оно должно менять цвет на красный, этого не происходит (в выпадающих подменю цвет меняется).
Вот коды:
| Код |
|---|
<div id="top-menu"> <div id="top-menu-items"><script src="/bitrix/templates/eurosiv/components/bitrix/menu/horizontal_multilevel/script.js" type="text/javascript"></script> <ul id="horizontal-multilevel-menu"> <li><div class="root-separator"></div><a href="" class="navigator">О компании</a> <ul> <li class=" item-last"><a href="" class="navigator">Жизнь</a></li> <li><a href="" class="navigator">Блоги</a></li> <li><a href="" class="navigator">Для прессы</a></li> <li><a href="" class="navigator">Вакансии</a></li> </ul> </li> <li><div class="root-separator"></div><a href="" class="navigator">Каталог</a> <ul> <li><a href="" class="navigator">Файлы </a></li> <li><a href="" class="navigator">Управление </a></li> <li><a href="" class="navigator"> портал</a></li> </ul> </li> <li><div class="root-separator"></div><a href="" class="navigator">Диллерам</a> <ul> <li><a href="" class="navigator">Купить </a></li> <li><a href="" class="navigator">Управление </a></li> <li><a href="" class="navigator"> портал</a></li> </ul> </li> <li class="root-item"><div class="root-separator"></div><a href="" class="navigator">Контакты</a> <ul> <li><a href="" class="navigator">Регионы</a> <ul> <li><a href="" class="navigator">Алматы</a></li> <li><a href="" class="navigator">Астана</a></li> <li><a href="" class="navigator">Караганда</a></li> </ul> </li> <li><a href="" class="navigator">Представити</a></li> <li><a href="" class="navigator">Для прессы</a></li> <li><a href="" class="navigator">Вакансии</a></li> </ul> </li> </ul> </div> <div style="clear:both;"></div> </div> |
css
| Код |
|---|
/*Root ul element*/
#horizontal-multilevel-menu
{
margin:0;
padding:0;
min-height:30px;
width:100%;
list-style:none;
float:left;
color: #376E70;
font-style: normal;
font-weight: normal;
text-decoration: underline;
text-transform: uppercase;
font: 10 tahoma;
}
/*Other ul elements*/
#horizontal-multilevel-menu ul
{
margin:0;
padding:0;
list-style:none;
}
/*Links*/
#horizontal-multilevel-menu a
{
display:block;
padding:4px 10px 5px 10px;
text-decoration:none;
text-align:center;
font: 10 tahoma;
}
#horizontal-multilevel-menu li
{
float:left;
}
#horizontal-multilevel-menu li.root-item, #horizontal-multilevel-menu li.root-item-selected
{
margin-right:6px;
}
/*Root items*/
#horizontal-multilevel-menu li a.root-item
{
color:#376E70;
font-weight:normal;
white-space:nowrap;
padding:7px 5px 7px 3px;
margin-left:10px;
font: 10 tahoma;
}
#horizontal-multilevel-menu div.root-separator
{
width:14px;
height:30px;
float:left;
background:url(images/ico_strelka.gif) center no-repeat;
}
/*Root menu selected*/
#horizontal-multilevel-menu li a.root-item-selected
{
/*background:#899fbb url(images/root-menu-bg.gif) repeat-x;*/
background:url(images/root-menu-right.gif) top right no-repeat;
color:#FF0000;
font-weight:normal;
padding:7px 5px 7px 3px;
margin-left:10px;
font: 10 tahoma;
}
/*Root menu selected:hover/
#horizontal-multilevel-menu li:hover a.root-item-selected, #horizontal-multilevel-menu li.jshover a.root-item-selected
{
background:#5977a0 url(images/root-menu-bg.gif) repeat-x;
color:black;
font-weight:bold;
font-size:11px;
padding:7px 10px;
}
*
/*Root items: hover*/
#horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item
{
/*background:#899fbb url(images/root-menu-bg.gif) repeat-x;*/
background:url(images/root-menu-right.gif) top right no-repeat;
color:#376E70;
padding:7px 5px 7px 3px;
font: 10 tahoma;
}
/*Item-parents*/
#horizontal-multilevel-menu a.parent
{
background: url(images/arrow.gif) center right no-repeat;
}
/*Denied items*/
#horizontal-multilevel-menu a.denied
{
background: url(images/lock.gif) center right no-repeat;
}
/*Child-items: hover*/
#horizontal-multilevel-menu li li:hover, #horizontal-multilevel-menu li li.jshover
{
background:url(images/menu-item-separator.gif) center top repeat-x;
color:#376E70;
}
/*Child-items selected*/
#horizontal-multilevel-menu li li.item-selected
{
background:url(images/menu-item-separator.gif) center top repeat-x;
color:#FF0000;
}
/*Last item in subbox*/
#horizontal-multilevel-menu li li.item-last
{
background-image:none;
}
/*Sub-menu box*/
#horizontal-multilevel-menu li ul
{
position:absolute;
width:205px;
top:auto;
margin-left:0px;
display:none;
z-index:531;
height:auto;
}
/*Sub-menu item box*/
#horizontal-multilevel-menu li li
{
width:100%;
/*border-bottom:1px solid #b8c3d0;*/
background: url(images/menu-item-separator.gif) center top repeat-x;
}
/*Item link*/
#horizontal-multilevel-menu li ul a
{
text-align:left;
}
/*Items text color & size */
#horizontal-multilevel-menu li a,
#horizontal-multilevel-menu li:hover li a,
#horizontal-multilevel-menu li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a
{
color: #376E70;
}
/*Items text color & size selected item*/
#horizontal-multilevel-menu li.item-selected a,
#horizontal-multilevel-menu li:hover li.item-selected a,
#horizontal-multilevel-menu li.jshover li.item-selected a,
#horizontal-multilevel-menu li:hover li:hover li.item-selected a,
#horizontal-multilevel-menu li.jshover li.jshover li.item-selected a,
#horizontal-multilevel-menu li:hover li:hover li:hover li.item-selected a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.item-selected a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li.item-selected a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.item-selected a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li.item-selected a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.item-selected a
{
color: #FF0000;
}
/*Items text color & size: hover*/
#horizontal-multilevel-menu li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a
{
color: #FF0000;
}
#horizontal-multilevel-menu li ul ul
{
margin:-24px 0 0 202px;
}
#horizontal-multilevel-menu li:hover ul ul,
#horizontal-multilevel-menu li.jshover ul ul,
#horizontal-multilevel-menu li:hover ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul ul
{
display:none;
/*For IE7 only (http://murphy.cz/ie7-hover-ghosts-bug/#drop-down-menu-ghosts-demo)*/
position:static;
width:auto;
}
#horizontal-multilevel-menu li:hover ul,
#horizontal-multilevel-menu li.jshover ul,
#horizontal-multilevel-menu li li:hover ul,
#horizontal-multilevel-menu li li.jshover ul,
#horizontal-multilevel-menu li li li:hover ul,
#horizontal-multilevel-menu li li li.jshover ul,
#horizontal-multilevel-menu li li li li:hover ul,
#horizontal-multilevel-menu li li li li.jshover ul,
#horizontal-multilevel-menu li li li li li:hover ul,
#horizontal-multilevel-menu li li li li li.jshover ul
{
display:block;
/*For IE7 only*/
position:absolute;
width:205px;
}
div.menu-clear-left
{
clear:left;
} |
ПОМОГИТЕ ПОЖАЛУЙСТА!
С таким меню работаю впервые, может в коде что-то лишнее? Замучилась уже, а сроки поджимают
