Search the Community

Добрый день. Прошу помощи-совета: вывел статьи в горизонтальное меню (вместо категорий). После этого пункты меню стали подсвечиваться только тогда, когда на них наведена мышка. Если кликнуть мышом на пункт меню и убрать мыша с этого пунка, то подсветка пропадает. Посмотреть, как это работает (точнее работает не так, как надо :-)), можно здесь Горизонательно меню сделано так (header.tpl): <div id="menu"> <ul> <?php foreach ($informations as $information) { ?> <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a> <?php } ?> </li> </ul> <!----<ul> <?php foreach ($categories as $category) { ?> <li><?php if ($category['active']) { ?> <a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a> <?php } else { ?> <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a> <?php } ?> <?php if ($category['children']) { ?> <div> <?php for ($i = 0; $i < count($category['children']);) { ?> <ul> <?php $j = $i + ceil(count($category['children']) / $category['column']); ?> <?php for (; $i < $j; $i++) { ?> <?php if (isset($category['children'][$i])) { ?> <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li> <?php } ?> <?php } ?> </ul> <?php } ?> </div> <?php } ?> </li> <?php } ?> </ul> ----> </div> Меню в оформлено так: #menu > ul > li:hover { background: #38b0e3; } #menu > ul > li > a.active { background: #38b0e3; } Полное оформление меню такое (может здесь где косяк какой, но не трогал ничего): #menu { background: /* #964b00 9b2d30*/ #92000a; border-bottom: 5px solid #38b0e3; height: 37px; margin-bottom: 15px; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px; border-radius: 0px 0px 0px 0px; -webkit-box-shadow: 0px 2px 2px #DDDDDD; -moz-box-shadow: 0px 2px 2px #DDDDDD; box-shadow: 0px 2px 2px #DDDDDD; padding: 0px 5px; } #menu ul { list-style: none; margin: 0; padding: 0; } #menu > ul > li { position: relative; float: left; z-index: 20; } #menu > ul > li:hover { background: #38b0e3; } #menu > ul > li > a.active { background: #38b0e3; } #menu > ul > li > a { font-size: 13px; font-weight: bold; color: #FFF; line-height: 14px; text-decoration: none; display: block; padding: 12px 15px 11px 15px; z-index: 6; position: relative; } #menu > ul > li > div { display: none; background: #FFFFFF; position: absolute; z-index: 5; padding: 5px; border: 1px solid #000000; -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -khtml-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; background: url('../image/menu.png'); } #menu > ul > li:hover > div { display: table; } #menu > ul > li > div > ul { display: table-cell; } #menu > ul > li ul + ul { padding-left: 20px; } #menu > ul > li ul > li > a { text-decoration: none; padding: 4px; color: #FFFFFF; display: block; white-space: nowrap; min-width: 120px; } #menu > ul > li ul > li > a:hover { background: #000000; } #menu > ul > li > div > ul > li > a { color: #FFFFFF; } Возможно кто-нибудь сталкивался с такой проблемой? Хочу понять, как лечить :-(