МЕНЮ / Горизонтальное выпадающее меню

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE xsl:stylesheet>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:hostcms="http://www.hostcms.ru/"

exclude-result-prefixes="hostcms">

<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

<xsl:template match="/site">

<ul class="menu">

<!-- Выбираем узлы структуры -->

<xsl:apply-templates select="child::*[show=1]"/>

</ul>

</xsl:template>

<!-- Запишем в константу ID структуры, данные для которой будут выводиться пользователю -->

<xsl:variable name="current_structure_id" select="/site/current_structure_id"/>

<xsl:template match="*">

<li>

<xsl:if test="current_structure_id = @id or count(.//structure[@id=$current_structure_id]) = 1">

<xsl:attribute name="class">current</xsl:attribute>

</xsl:if>

<xsl:if test="position() = last()">

<xsl:attribute name="style">background-image: none</xsl:attribute>

</xsl:if>

<!-- Показывать ссылку, или нет -->

<xsl:if test="show = 1">

<!-- Определяем адрес ссылки -->

<xsl:variable name="link">

<xsl:choose>

<!-- Если внешняя ссылка -->

<xsl:when test="url != ''">

<xsl:value-of disable-output-escaping="yes" select="url"/>

</xsl:when>

<!-- Иначе если внутренняя ссылка -->

<xsl:otherwise>

<xsl:value-of disable-output-escaping="yes" select="link"/>

</xsl:otherwise>

</xsl:choose>

</xsl:variable>

<a href="{$link}"><xsl:value-of disable-output-escaping="yes" select="name"/></a>

</xsl:if>

<!-- Выбираем подузлы структуры -->

<xsl:if test="count(child::*[show=1]) &gt; 0 and @id = 88">

<ul>

<!-- Выбираем узлы структуры -->

<xsl:apply-templates select="child::*[show=1]"/>

</ul>

</xsl:if>

</li>

</xsl:template>

</xsl:stylesheet>

/* ===== MENU =====*/

nav{padding:4px 4px 4px;float:right;}

nav>div{background:url(/images/11.png) 0 0 repeat-x #ddd;}

ul.menu{margin:0 1px 0 0;display:inline-block;float:left;list-style:none; position:relative;}

ul.menu li {float:left;margin:0 1px 0 0;border-right:#ddd 1px solid; }

ul.menu li a {line-height:17px;color:#000;font-size:12px;text-decoration:none;text-transform:uppercase; display:block; padding:10px 10px;}

ul.menu li:hover, ul.menu li.current {background:#f60000; border:0;-moz-border-radius:4px;/*Firefox*/-webkit-border-radius:4px;/*Safari, Chrome*/border-radius:4px;}

ul.menu li.current a {color:#fff;}

ul.menu li.current li a {color:#000;}

ul.menu li.current li a:hover {color:#fff;}

ul.menu li a:hover, ul.menu li a.current {color:#FFF;}

ul.menu li.home-page a{color:#FFF;}

ul.menu li.home-page span{background:url(/images/12.png) 0 0 no-repeat;width:19px;height:19px;display:block;}

.menu li:hover > ul {opacity:1;visibility:visible;}

.menu ul {opacity:0;visibility:hidden; position:absolute;top:37px; width:180px; background:#fff; border: 1px solid #ccc; z-index:10000;-moz-box-shadow: 0px 6px 8px #1f1f1f;/*FF 3.5+*/ -webkit-box-shadow: 0px 6px 8px #1f1f1f;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=180, Color=#999)";/*IE 8*/ box-shadow: 0px 6px 8px #999; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=180, Color=#999);/*IE 5.5-7*/}

.menu ul li {width:100%; border-bottom:1px solid #ccc;}

.menu ul li a {padding:6px 14px;}

.menu li:hover{visibility:inherit;/* fixes IE7 'sticky bug' */ left:0;top:63px;/* match top ul list item height */z-index:99;}

/*==================*/