Streaming live at 10am (PST)

Nested unordered lists collapsing/disappearing


#1

I am attempting to create an unordered list for a left-hand navigation, with nested ul's for child navigation. Something ROUGHLY like this:

<ul>
    <li><a>Navigation Link</a></li>
    <li><a>Navigation Link</a>
        <ul>
            <li><a>Child Nav Link</a></li>
            <li><a>Child Nav Link</a></li>
        </ul>
    </li>
    <li><a>Navigation Link</a></li>
</ul>

This kind of thing. I use the List object thing from the Add menu.

Here's the bug:

I can successfuly create this structure using the List object from the Add menu! But at some point as I begin styling, the nested ul's disappear from the navigator! I'm no longer able to work with them at all, select them by clicking in the builder, or interact with them in any way. I can SEE them in the builder, but they have melded inextricably into their containing li and no longer appear in the navigator.

Undo does not fix it.
I have recreated this menu 3 or 4 times and each time it bugs out.

Complicating Issue:
The Add panel doesn't actually let me DRAG a list object into the existing list object: "Only list items can be placed directly into a list," etc. I can only get that ul in there in the first place by clicking on the Nav Link < a > in the navigator after which I want the ul to sit in the flow and then just CLICK the list object from the Add menu. Then it appears where I want it to go and it's visible as expected in the navigator.

But then, as I explained, eventually the nested ul merges into its containing li.

What could be going on? Any help? Thanks!


#2

Okay, it just did it again.

Here's when it all breaks:
When I change the text of any < a > in an < li > that also contains a < ul >

That breaks it. 'Undo' changes the text back, but doesn't un-break the nested lists.

Additionally:
Revert back to a previous back-up BEFORE the text edit and list-breakage occurred? The list is still broken as described above.


#3

Can you please share your project’s public link so it's easier to understand your issue?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link


#4

Righto!

https://preview.webflow.com/preview/broken-list?preview=bd6fee07257d61c7cba4fe6931d0ab21

I've made the list twice, and 'broke' the first one by changing the text that currently says 'Agriculture'. Changing that text breaks the list.

There's an unbroken list below.

EDIT: The lists are on the Inside page.
EDIT: I just looked at it, and BOTH lists are broken even without attempting to edit the text. And coming back into Design View after having exited to the Dash breaks a previously unbroken list. Okay.


#5

Hey @sarahc, I think I see the root cause, for some reason the inner LIs think that they are "text nodes". I recreated a much more simplified test case here: https://preview.webflow.com/preview/broken-list-copy?preview=38d68cf3d890f2050d4270d2a4a33485

We're looking into a fix, and hope to have something rolled out soon!


#6

Thank you very much! I really appreciate it.

To anyone else - is there another semantically sound way to create this navigation in the meantime?


#7

@sarahc Can you let us know exactly which browser you're working in?

Also, the DropDown control uses semantic <nav>-based markup:

<nav class="w-dropdown-list">
  <a class="w-dropdown-link" href="#">Link 1</a>
  <a class="w-dropdown-link" href="#">Link 2</a>
  <a class="w-dropdown-link" href="#">Link 3</a>
</nav>

A bit more on this approach: http://html5doctor.com/nav-element/


#8

I'm working in Chrome. (Version is 41.0.2272.101)

And thanks for that alternative - should work just fine for my purposes. Very nice. smiley


#9