Not working CSS selector

According to MDN:

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

For example, in the markup: <p>This text has <em>some emphasized words</em> in it.</p> the style rule:p { text-decoration: underline } would cause the entire paragraph to be underlined. However, the style rule: em { text-decoration: none } would not cause any change; the entire paragraph would still be underlined. (However, the rule em { text-decoration: overline } would cause a second decoration to appear on "some emphasized words".)

While the browser might render it without an issue, certain browsers will render the text-decoration, and get confused by the containing element (in this case, the <li>. This fact is proven by @Matthew Rapati's comment). For example, this is from the MDN article on the issue (borrowed from j08691's answer for completeness):

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

For example, in the markup: <p>This text has <em>some emphasized words</em> in it.</p> the style rule: p { text-decoration: underline } would cause the entire paragraph to be underlined. However, the style rule: em { text-decoration: none } would not cause any change; the entire paragraph would still be underlined. (However, the rule em { text-decoration: overline } would cause a second decoration to appear on "some emphasized words".)

You should simply place the child <ul> as a sibling, rather than child of the <li>, for example:

<ul>
    <li>bla</li>
    <li>bla bla </li>
    <ul>
        <li>bla bla bla</li>
        <li>bla bla bla bla </li>
        <li>bla bla bla bla bla</li>
        <li>bla bla bla bla bla bla</li>
    </ul>
</ul>

You should then update your selector as follows:

section ul ul li {
    text-decoration: none !important;
}

You can see a working jsFiddle Demo

The text-decoration none is working. But the the unclosed li above is affecting the li bellow.

Add a span element around the text inside the first set of li elements. Then change the css so you target the span instead of the li. If you add a class to the li elements, your css will be easier to read.

http://jsfiddle.net/337C7/27/

html:

<ul class="first">
                        <li class="first-item"><span>bla</span></li>
                        <li class="first-item"><span>bla bla </span>
                            <ul class="second">
                                <li>bla bla bla</li>
                                <li>bla bla bla bla </li>
                                <li>bla bla bla bla bla</li>
                                <li>bla bla bla bla bla bla</li>
                            </ul>
                        </li>
                    </ul>

css:

.first-item > span{text-decoration: underline;}

Try this: http://jsfiddle.net/337C7/30/

HTML:

                  <ul>
                        <li>bla</li>
                        <li>bla bla </li>
                            <ul>
                                <li>bla bla bla</li>
                                <li>bla bla bla bla </li>
                                <li>bla bla bla bla bla</li>
                                <li>bla bla bla bla bla bla</li>
                            </ul>
                      </ul>

CSS

section ul ul li {
    text-decoration: none !important;
}

You could use a border instead of text-decoration. You'll need to float and clear as <li> is block level. This way you don't have to change any HTML.

section ul li {
  border-bottom: 1px solid #000;
  float: left;
  clear: both;
} 

section ul ul li {
  border: none; 
}

http://jsfiddle.net/337C7/33/

section ul li /* descendants including direct children */ {
    text-decoration: underline;
}

section>ul>li /* children */ {
    text-decoration: none;
}

use children selector for the children after you style the descendants. I'm not sure if you wanted the children to be decorated or the descendants of the children so my rules may be reversed. But the children selector goes after the descendants and then should not require an !important rule.

Update per your fiddle

col-md-12 col-sm-12 >ul>li /* children */ {
        text-decoration: none;
    }

or

section>div>div>div>ul>li /* children */ {
    text-decoration: none;
}