Hi,
I am currently developing a modx based website which unfortanetely is only available on a local server as of now so it is a bit hard to describe my problem in a very detailed way. I would very much like to receive rough directions anyhow so i will try to explain the issue with words. If i have overcome the issues with our hosting company i will put it online asap and report back here and provide an url.
I use css definitions to achieve a dropdown menu and it works also in the IE (also in IE thanks to hover:anything). I styled the li’s with the id: menu1-menu4 to each have individual coloring. The dropdowns work perfectly using this approach.
What is not working right now (not in IE, test in FF worked as expected) is applying background-color styles to the menu1-menu4 li’s only in the case the user hovers over them or over one of their child li’s in the underlying uls of menu1-menu4.
The hard part is that i want to apply another (inactive-) background-color style to the parent menu1-menu4 li’s if the user does not hover over the dropdown in question. In the IE the inactive color is allways applied because it probably does not interpret/recognize some of my css definitions correctly.
Right now i included a wayfinder call in my template like this (i reformatted it a bit by hand to make it readable):
<div id="nav">
[[Eff_Wayfinder? &startId=`0` &rowIdPrefix=`menu` &innerTpl=`wfInner_left` &outerTpl=`wfOuter_left` &levelClass=`level` &level=`2`]]
</div>
The list wayfinder outputs looks like this
<div id="nav">
<ul>
<li id="menu1" class="level1 active"><a href="/effictiv/index.php?id=1" title="Home" >Effictiv - Home</a>
<ul>
<li id="menu9" class="level2"><a href="/effictiv/index.php?id=9" title="Pagina 1 onder home title" >Pagina 1 onder home</a></li>
<li id="menu10" class="level2"><a href="/effictiv/index.php?id=10" title="Pagina 2 onder home title" >Pagina 2 onder home</a></li>
<li id="menu11" class="last level2"><a href="/effictiv/index.php?id=11" title="Pagina 3 onder home title" >Pagina 3 onder home</a></li>
</ul>
</li>
<li id="menu2" class="level1"><a href="/effictiv/index.php?id=2" title="Pagina 1 - Title" >Pagina 1</a>
<ul>
<li id="menu5" class="level2"><a href="/effictiv/index.php?id=5" title="Pagina 1.1. Title" >Pagina 1.1.</a></li>
<li id="menu7" class="last level2"><a href="/effictiv/index.php?id=7" title="Pagina 1.2. Title" >Pagina 1.2.</a></li>
</ul>
</li>
<li id="menu3" class="level1"><a href="/effictiv/index.php?id=3" title="Pagina 2 - Title" >Pagina 2</a>
<ul>
<li id="menu12" class="level2"><a href="/effictiv/index.php?id=12" title="Pagina 1 onder Pagina 2 Title" >Pagina 1 onder Pagina 2</a></li>
<li id="menu18" class="last level2"><a href="/effictiv/index.php?id=18" title="Pagina 2 onder Pagina 2 Title" >Pagina 2 onder Pagina 2</a></li>
</ul>
</li>
<li id="menu4" class="last level1"><a href="/effictiv/index.php?id=4" title="Pagina 3 - Title" >Pagina 3</a>
<ul>
<li id="menu13" class="level2"><a href="/effictiv/index.php?id=13" title="Pagina 1 onder Pagina 3 Title" >Pagina 1 onder Pagina 3</a></li>
<li id="menu19" class="level2"><a href="/effictiv/index.php?id=19" title="Pagina 2 onder Pagina 3 Title" >Pagina 2 onder Pagina 3</a></li>
<li id="menu22" class="last level2"><a href="/effictiv/index.php?id=22" title="Pagina 3 onder Pagina 3 Title" >Pagina 3 onder Pagina 3</a></li>
</ul>
</li>
</ul>
</div>
Below you can see an small portion of my css for the horizontal navigation. I think it is the part that is failing. Am i correct? Are there any common workarounds for this problem? In case it is needed you can find the complete ccs styling of the wayfinder call here:
http://www.effictiv.nl/effictiv/nav.txt
#nav li.level1#menu1
{
...
}
#nav li.level1#menu1:hover
{
...
}
#nav li.level1#menu1 li:hover
{
...
}
