Menu icon Foundation
Nested List

Found I'm unable to mix list styles with nested lists. The parent overrides the inner nested UL.
For the code below, all list items have no bullet.
Is there a way to override that?

<ul class="no-bullet">
    <li><strong>UPCOMING MASTER CLASSES</strong>
    <ul class="circle">
      <li>August 24 - Melissa Jackson</li>
      <li>August 31 - Jess Hendricks</li>
      <li>September 7 - Andrew Winghart</li>
      <li>September 14 - Jaci Royal</li>
      <li>October 12 - Candice Brown</li>
      <li>November - Sonya Tayeh (tentative)</li>
      </ul></li>
</ul>
            

         

lists

Found I'm unable to mix list styles with nested lists. The parent overrides the inner nested UL.
For the code below, all list items have no bullet.
Is there a way to override that?

<ul class="no-bullet">
    <li><strong>UPCOMING MASTER CLASSES</strong>
    <ul class="circle">
      <li>August 24 - Melissa Jackson</li>
      <li>August 31 - Jess Hendricks</li>
      <li>September 7 - Andrew Winghart</li>
      <li>September 14 - Jaci Royal</li>
      <li>October 12 - Candice Brown</li>
      <li>November - Sonya Tayeh (tentative)</li>
      </ul></li>
</ul>
            

         
Les Mizzell about 5 years ago

Perhaps just style your own lists?

Turns out, that's the only way to do it.

So, I don't touch the foundation.css file. I put all mods in overrides.css - and try to remember to reference a line number from the foundation.css file in my comments so I can always go back and figure out what I was modifying to start with! I'm not always that disciplined though.

<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/overrides.css" />

Karl Ward about 5 years ago

looks like list styles are recursive, and no-bullet is likely defined after circle thus superseding it ... Perhaps just style your own lists? It is pretty simple:

ul.myclass { list-style-type: circle; }