Adding an hamburger toggle to my website

What does that link have to do with anything? That’s a bootstrap snippet.

Only use divs when there is no other more suitable element. In most cases there is something designed for the task in hand. e.g. lists for lists and tables for tables and heading tags for headings and p tags for paragraphs and span tags for inline fragments and so on…

In a nested dropdown structure it makes sense to make a nested dropdown a nested ul list because it isn’t one list item; its a group of nested items related to the parent. A nested div does not imply that relationship in the same way that a nested ul does. The html is virtually the same except that the anchors would need to be in a list parent and not bare anchors next to each other.

I showed an example in post #2 in this thread where I comprae a basic dropdown with a nested list approach.

Same answer really. It’s the same structure except everything is contained in a li pair including the nested ul.

Here they are side by side.

<ul>
  <li><a href="#">List item</a></li>
  <li><a href="#">List item</a></li>
  <li><a href="#">List item with following nested list</a>
    <ul>
      <li><a href="#">Nested list item</a></li>
      <li><a href="#">Nested list item</a></li>
    </ul>
  </li>
  <li><a href="#">List item</a></li>
  <li><a href="#">List item</a></li>
</ul>

<div>
  <a href="#">Div item</a>
  <a href="#">Div item</a>
  <a href="#">Div item with following nested div</a>
  <div>
    <a href="#">Nested Div item</a>
    <a href="#">Nested Div item</a>
  </div>
  <a href="#">Div item</a>
  <a href="#">Div item</a>
</div>

The important part to note is that the nested portion of the ul starts inside the li tag like so.

...
<li><a href="#">List item with following nested list</a>
    <ul>
      <li><a href="#">Nested list item</a></li>
      <li><a href="#">Nested list item</a></li>
    </ul>
</li>
... etc

If I can’t see it I can’t fix it :slight_smile: Where are we talking and in which demo?

1 Like