¿Cómo puedo hacer que funcione esta anulación de decoración de texto CSS?

Te deshaces de text-decoration aplicado a un elemento padre en esos casos:

• Fuera de flujo elementos, tales como flotados y absolutamente posicionados

  li {
    float: left; /* Avoid text-decoration propagation from ul */
    clear: both; /* One li per line */
  }
  ul { overflow: hidden; } /* Clearfix */
  

  ul {
    overflow: hidden; /* Clearfix */
  }
  li {
    float: left; /* Avoid text-decoration propagation from ul */
    clear: both; /* One li per line */
  }
  li.u {
    text-decoration: underline;
  }

  <ul>
    <li>Should not be underlined</li>
    <li class="u">Should be underlined
      <ul>
        <li>Should not be underlined</li>
        <li class="u">Should be underlined</li>
      </ul>
    </li>
  </ul>

• Elementos atómicos de nivel inline, como bloques inline y tablas inline

  Pero si usas li{display:inline-block}, entonces no tienes balas (pierdes display:list-item) y los elementos aparecen uno al lado de los otros.

  Entonces, para tener un elemento por línea, puede utilizar

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  

  Y para añadir las viñetas, puede utilizar ::before pseudo-elementos. Sin embargo, las viñetas no deben estar subrayadas, por lo que tendrás que sacarlas de flujo o hacerlas de nivel atómico en línea también.

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  li:before {
    content: '• ';         /* Insert bullet */
    display: inline-block; /* Avoid text-decoration propagation from li */
    white-space: pre-wrap; /* Don't collapse the whitespace */
  }
  li.u {
    text-decoration: underline;
  }

  <ul>
    <li>Should not be underlined</li>
    <li class="u">Should be underlined
      <ul>
        <li>Should not be underlined</li>
        <li class="u">Should be underlined</li>
      </ul>
    </li>
  </ul>

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  li:before {
    content: '•';          /* Insert bullet */
    position: absolute;    /* Avoid text-decoration propagation from li */
    margin-left: -.75em;
  }
  li.u {
    text-decoration: underline;
  }

  <ul>
    <li>Should not be underlined</li>
    <li class="u">Should be underlined
      <ul>
        <li>Should not be underlined</li>
        <li class="u">Should be underlined</li>
      </ul>
    </li>
  </ul>

Este comportamiento se especifica en CSS 2.1 y Nivel de Módulo de Decoración de texto CSS 3:

Tenga en cuenta que las decoraciones de texto no se propagan a cualquier fuera de flujo descendientes, ni al contenido de descendientes atómicos de nivel en línea tales como bloques en línea y tablas en línea.

La razón por la que estás viendo lo que estás viendo es que tu regla

ul > li.u

Tiene preferencia sobre:

ul > li > ul > li

Como se especifica una clase y que tiene más peso que los selectores de elemento juntos.

Edit: Lo que podrías intentar es:

.u ul {
        text-decoration: none;
}
.u {
        text-decoration: underline;
}

Y juega con eso (tal vez tengas que usar li.u en lugar de solo .u ).

Sin embargo , dependiendo del contenido, es posible que desee envolver las partes subrayadas en q, em o strong etiquetas y estilo estas etiquetas en lugar de usar una clase. De esa manera estaría describiendo su contenido, así como estilizarlo.

La respuesta de okw anterior explica perfectamente por qué no puedes hacer lo que estás pidiendo sin algunos otros cambios. ¡No, no te vas a volver loco!

Posibles soluciones:

• intenta border-bottom?
• ¿envolver el texto que desea subrayar en una etiqueta span class="u"? (para evitar que la decoración de texto adorne elementos anidados)
• si no puede cambiar el marcado, puede agregar algo de scripting para lograr lo mismo que mi sugerencia anterior.

Lo mejor de suerte!

.u {text-decoration: underline;}