Submenu problem

12 Posts

scs Reply #1, 16 years, 6 months ago

Hi,

I have a simple site navigation with a submenu styled differently. Wayfinder does not close the li tag from the main menu and I am having styling issues.

This is Wayfinder’s output:

<div id="navigation">

<ul class="navigation-menu">
 :-\<li><a class="navtext" href="/scs/">Home</a></li>
<li><a class="navtext" href="/accurato/business-development.html">Business Development</a>

<ul class="navigation-submenu">
<li><a class="navtext-small" href="/scs/succesvol-verkopen.html">Succesvol Verkopen</a></li>
</ul></li>

<li><a class="navtext" href="/scs/project-management.html">Project Management</a></li>
<li class="active">E-Marketing

<ul class="navigation-submenu">
<li><a class="navtext-small" href="/scs/zoekmachine-optimalisatie.html">Zoekmachine Optimalisatie</a></li>
<li><a class="navtext-small" href="/scs/online-adverteren.html">Online Adverteren</a></li>
<li class="last"><a class="navtext-small" href="/scs/webstatistiekenrn.html">Webstatistieken</a></li>
</ul></li>

<li class="last"><a class="navtext" href="/scs/contact.html">Contact</a></li>

</ul>
</div>

Is there a way to force Wayfinder to close the li tags correctly?

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 16 years, 6 months ago

There is nothing wrong with the nested lists as they are being output by Wayfinder. That’s the way they are supposed to be.

The nested, inner UL is contained within its parent LI. You just need to be more specific with your css directives. For example, to hide the inner (submenu) UL use css like this:

ul li ul {display: none;}
ul li:hover ul {display: block;}

This will hide the inner UL until the mouse is placed over the parent LI, then the submenu will be displayed.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

12 Posts

scs Reply #3, 16 years, 6 months ago

Thanks Susan for your reply. I re-styled the navigation. It looks great.