My XSLT navigation is having a starnge problem. It happens to be that first mainnode is always selected and submenus of this mainnode are showing for all the other mainnodes unless and otherwise I select other mainnodes. I want my mainnodes to show its childnodes on mouse over.
Please can anybody help me out ??
This is my XSLT code
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
exclude-result-prefixes="msxml umbraco.library">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
<!-- start writing XSLT -->
<style type="text/css">
a {
text-decoration: none;
}
a:link {
color: #080;
}
a:visited {
color: #790;
}
a:active {
color: red;
}
a:hover {
text-decoration: underline;
}
h1 {
text-align: center;
padding: 0 0 0.25em 0;
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-weight: bold;
color: green;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: #060;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #7d6340;
border-width: 0 5px;
}
li {
float: left;
position: relative;
width: 10em;
text-align: center;
cursor: default;
background-color: white;
border: 1px solid #7d6340;
border-width: 1px 0;
}
li#first {
border-left-width: 1em;
}
li#last {
border-right-width: 1em;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: url(images/ddbg3.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #7d6340;
}
li>ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
hr {
display: none;
}
p {
clear: left;
background: url(images/remora.gif) center left no-repeat;
padding: 1em 1em 0 1em;
margin: 0;
}
p.image {
float: right;
font-size: 0.8em;
text-align: center;
color: #7d6340;
padding: 1.25em 1.25em 0.25em 0.25em;
}
p.image img {
display: block;
border: 1px solid #7d6340;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("Navi");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
<ul id="Navi">
<xsl:for-each select="$currentPage/ancestor::root/node [string(./data [@alias='umbracoNaviHide']) != '1']">
<li id="first">
<xsl:if test="$currentPage/@id=current()/@id">
</xsl:if>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:attribute name="title"><xsl:value-of select="@nodeName" /></xsl:attribute>
<xsl:value-of select="@nodeName" />
</a>
<ul>
<xsl:for-each select="$currentPage/ancestor-or-self::node [@level=1]/node [string(./data [@alias='umbracoNaviHide']) != '1']">
<li>
<xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id">
</xsl:if>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:attribute name="title"><xsl:value-of select="@nodeName" /></xsl:attribute>
<xsl:value-of select="@nodeName" />
</a>
</li>
</xsl:for-each>
</ul>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>