Добро пожаловать на сайт <БагБД>, где вы можете задавать вопросы о программировании и разработке на Битрикс и Битрикс24, и получать быстрые и квалифицированные ответы от профессионалов!

Помогите с меню

00 голосов
1
Помогите пожалуйста разобраться с меню.
Мне нужно сделать меню как на сайте www.eurosiv.kz, только иерархическое, вида

Код
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-select
спросил 06 Июль, 13 от smekte (120 баллов)

1 Ответ

00 голосов
На первый взгляд проблема именно в верстке - т.е. ваши пункты меню не влазят во внешнюю коробку и оттого скачут. Разбираться в двух процитированных кусках кода совершенно не хочется.
ответил 06 Июль, 13 от ashkmn (700 баллов)

Похожие вопросы

0 голосов
1 ответ
спросил 28 Июль, 15 от аноним
0 голосов
1 ответ
спросил 30 Авг, 13 от Daltazar (280 баллов)
0 голосов
7 ответов
спросил 13 Янв, 13 от StRanger (340 баллов)
0 голосов
1 ответ
спросил 08 Окт, 13 от Jugoar (480 баллов)
0 голосов
3 ответов
спросил 08 Май, 14 от HuT (100 баллов)