ТвойWeb :: Версия для печати :: Центровка пунктов в выпадающем меню по центру ul-блока

1. UFO - 28 Января, 2013 - 15:51:57 - перейти к сообщению

Всем привет!

Требуется в выпадающем меню, т.е. в самых блоках выпадающего меню, сделать чтобы все ссылки были в центре, т.е. чтобы они сбились в центре, не нужно центровать блоки, центровать ссылки выше, а только сами ссылки в блоке, который выпал из ссылок меню. Надеюсь в чем тут суть объяснил, а теперь привожу коды - CSS и HTML с моими комментариями БОЛЬШИМИ буквами где нужный момент для исправления.

CODE:

/**Top menu**/
#horizontal-multilevel-menu,#horizontal-multilevel-menu ul
{
margin:0; padding:0;
position:relative;
min-height:27px;
width:100%;
list-style:none;
font-size:11px;
float:left;
z-index:50;
/*font-size:90%*/;
text-align:center;
}

#horizontal-multilevel-menu
{
text-align:center;
}

/*Links*/
#horizontal-multilevel-menu a
{
display:block;
padding:4px 10px;
/*padding:0.3em 0.8em;*/
text-decoration:none;
text-align:center;

}

#horizontal-multilevel-menu li
{
float:left;
}

/*Root items*/
#horizontal-multilevel-menu li a.root-item
{
color:#000; font-size: 14px; padding:4px 10px 5px;
font-weight:bold; position: relative;
margin:0 7px; background:#ffda00;
}
/*Root menu selected*/
#horizontal-multilevel-menu li a.root-item-selected
{
background:#ff6291; font-size: 14px;
color:#fff; position: relative; margin:0 7px;
font-weight:bold; padding:4px 10px;

}

/*Root items: hover*/
#horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item
{
background:#ff6291;
color:#fff;
}

/*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 ul li li.jshover
{
background:#D6D6D6;
color:#fff;
}
.bcw, .rcw{ height: 15px;
width: 100%; position:relative; z-index:0; overflow:hidden;}
.bcw .lc, .bcw .rc{top:-12px;}
/*Child-items selected*/
#horizontal-multilevel-menu li.item-selected
{
background:#D6D6D6;
color:#fff;
}

/*Sub-menu box*/
#horizontal-multilevel-menu li ul
{
position:absolute;
width: 960px;
top:auto;
display:none;
z-index:500;
left:5px; zoom:1;
height:auto;
background:#ff6291;
margin: 0 auto;
text-align: center;

}

/*ВОТ ОН САМ БЛОК, КОТОРЫЙ ОТОБРАЖАЕТ ССЫЛКИ, НО ЕГО ЦЕНТРИРОВАТЬ НЕ ПОЛУЧАЕТСЯ, ОН ЧАСТО УЕЗЖАЕТ КУДА-ТО*/
/*Sub-menu item box*/
#horizontal-multilevel-menu li li
{
border-left:1px solid #fff;
}

/*А ВОТ КАЖДАЯ ССЫЛКА ЭТОГО ВЫПАДАЮЩЕГО БЛОКА ИЗ МЕНЮ*/
/*Item link*/
#horizontal-multilevel-menu li ul a
{
text-align:center;
}
li.rcw:hover, li.bcw:hover{background:none !important;}
div.menu-clear-left
{
clear:left;
}

(Добавление)
А теперь код шаблона HTML:

CODE:

<ul id="horizontal-multilevel-menu">

<?
$previousLevel = 0;
foreach($arResult as $arItem):?>

<?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
<?=str_repeat("<li class='bcw'><img src='/images/cmmenul.png' class='lc' /><img src='/images/cmmenur.png' class='rc' /></li></ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>
<?endif?>

<?if ($arItem["IS_PARENT"]):?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><img src="/images/cmmenul.png" class="lc" /><?=$arItem["TEXT"]?><img src="/images/cmmenur.png" class="rc" /></a>
<ul><li class='rcw'><img src='/images/cmmenul.png' class='lc' /><img src='/images/cmmenur.png' class='rc' /></li>
<?else:?>
<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a>
<ul><li class='rcw'><img src='/images/cmmenul.png' class='lc' /><img src='/images/cmmenur.png' class='rc' /></li>
<?endif?>

<?else:?>

<?if ($arItem["PERMISSION"] > "D"):?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><img src="/images/cmmenul.png" class="lc" /><?=$arItem["TEXT"]?><img src="/images/cmmenur.png" class="rc" /></a></li>
<?else:?>
<?php
// ВОТ ТО МЕСТО, ГДЕ ВЫВОДИТСЯ КАЖДАЯ ТАКАЯ ССЫЛКА ИЗ ВЫПАДАЮЩЕГО БЛОКА,
// КОТОРЫЕ Я БЫ ХОТЕЛ ЦЕНТРОВАТЬ В ЭТОМ ВЫПАДАЮЩЕМ БЛОКЕ
?>
<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
<?endif?>

<?else:?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li><a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
<?else:?>
<li><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
<?endif?>

<?endif?>

<?endif?>

<?$previousLevel = $arItem["DEPTH_LEVEL"];?>

<?endforeach?>

<?if ($previousLevel > 1)://close last item tags?>
<?=str_repeat("</ul></li>", ($previousLevel-1) );?>
<?endif?>

</ul>
<div class="menu-clear-left"></div>