как сделать свободное позиционирование выпадающего подменю?

<?php defined('_JEXEC') or die(); ?> <div class="css_menu"> <ul> <?php foreach ($items as $item) { ?> <li><a href="<?php echo JRoute::_($item['link'] . '&Itemid=' . $item['id']); ?>"><?php echo $item['name']; ?></a> <?php if (isset($item['items'])) { ?> <div class="css_submenu"> <ul> <?php foreach ($item['items'] as $subitem) { ?> <li><a href="<?php echo JRoute::_($subitem['link'] . '&Itemid=' . $subitem['id']); ?>"><?php echo $subitem['name']; ?></a></li> <?php } ?> </ul> </div> <?php } ?> </li> <?php } ?> </ul> </div>

div.css_menu ul { list-style: none; margin: 0px; padding: 0px; } div.css_menu ul li { float: left; margin: 0px; padding: 4px; border: 1px solid #ccc; background-color: #fff; } div.css_menu ul li a { display: block; font-size: 12px; text-decoration: none; white-space: nowrap; } div.css_menu ul li div.css_submenu { position: absolute; display: none; } div.css_menu ul li:hover div.css_submenu { display: block; } div.css_menu ul li div.css_submenu ul { list-style: none; position: relative; top: 5px; left: -5px; margin: 0px; padding: 4px; border: 1px solid #ccc; background-color: #fff; } div.css_menu ul li div.css_submenu ul li { float: left; margin: 4px 0px 0px 0px; padding: 0px; border: none; }

Как выровнять, понятно.

Код: php

<?php defined('_JEXEC') or die(); ?>
<div id="topnav">
<!--создаем меню-->
<ul>
<?php foreach ($items as $item) { ?>
<!--создаем каждый пункт меню вместе с его подменю-->
<li><a href="<?php echo JRoute::_($item['link'] . '&Itemid=' . $item['id']); ?>"><?php echo $item['name']; ?></a>
<?php if (isset($item['items'])) { ?>
<!--создаем подменю-->
<span>
<ul>
<?php foreach ($item['items'] as $subitem) { ?>
<li><a href="<?php echo JRoute::_($subitem['link'] . '&Itemid=' . $subitem['id']); ?>"><?php echo $subitem['name']; ?></a></li>
<?php } ?>
</ul>
 </span>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>

Код: css

#topnav ul {
	margin: 0; padding: 0;
	float: left;
	list-style: none;
	position: relative; /*--Установить относительное позиционирование на неупорядоченный список - не на элемент списка--*/
}
#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555; /*--Разделитель для каждого базового уровня ссылки--*/
}
#topnav li a {
	padding: 10px 15px;
	display: block;
	text-decoration: none;
}
#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none; /*--Показывать по умолчанию--*/
	color: #fff;
}
#topnav li:hover span { display: block; } /*--Показать подменю при наведении--*/
#topnav li span a { display: inline; } /*--Возвращаем в исходное состояние--*/
#topnav li span a:hover {text-decoration: underline;}

Теперь, хотелось бы понять, как выровнять и меню и подменю по центру родительского элемента (div). Т.е., что бы было так

меню
выпадающее подменю

Yootheme planet + flashxml флеш поверх выпадающего меню Автор maxsim	Ответов: 2 Просмотров: 7369	10.10.2013, 19:05:55 от Germanius
Как сделать выбор фоновой картинки случайной? Автор svetlovanton	Ответов: 1 Просмотров: 3048	29.11.2012, 23:37:00 от svetlovanton
Как сделать прокрутку контентной части и фисксированную шапку в шаблоне. Автор veter1976	Ответов: 3 Просмотров: 5707	22.11.2012, 14:53:22 от negus
Ребята, Как сделать шаблон шире? (шаб JA Pariiti) Автор Max-2012	Ответов: 1 Просмотров: 3878	15.11.2012, 15:33:30 от Max-2012
Активный невидимый пункт меню. Как сделать? На примере сайта внутри Автор tommy	Ответов: 3 Просмотров: 3938	30.05.2012, 17:24:44 от tommy

как сделать свободное позиционирование выпадающего подменю? - Joomla 1.5, Шаблоны: Как сделать ...

Новости Joomla

👩‍💻 Компонент "CS Афиши" для Joomla.

Яндекс выпустил инструмент Видимость сайта в Алисе AI.

👩‍💻 ИИ-админ для Joomla ближе, чем вы думаете: Joomla MCP.

Kleg

как сделать свободное позиционирование выпадающего подменю?

Kleg

Re: как сделать свободное позиционирование выпадающего подменю?

Похожие темы