Kein Zeilenumbruch im <li> Element

[Mief]

Hier nochal mein HTML-Code:

<nav id="nav">  
            <div id="navigation">  
                <ul id="nav_list">  
                    <li class="folder">icons  
                        <ul>  
                            <li class="file">new_document.png</li>  
                            <li class="file">new_document-klein.png</li>  
                            <li class="file">save_document.png</li>  
                            <li class="file">save_document-klein.png</li>  
                            <li class="file">open_document.png</li>  
                            <li class="file">open_document-klein.png</li>  
                        </ul>  
                    </li>  
                    <li class="folder">scripts  
                        <ul>  
                            <li class="file">ie-css3.htc</li>  
                            <li class="file">jquery-1.10.2.min.js</li>  
                        </ul>  
                    </li>  
                    <li class="folder">styles  
                        <ul>  
                            <li class="file">footer.css</li>  
                            <li class="file">header.css</li>  
                            <li class="file">iframe.css</li>  
                            <li class="folder">Testpunkt  
                                <ul>  
                                    <li class="file">Testpunkt 1</li>  
                                    <li class="file">Testpunkt 2</li>  
                                    <li class="file">Testpunkt 3 und das geht hier noch ganz lange so weiter und hoffentlich gibt es hier einen Scrollbalken und keinen Zeilenumbruch.</li>  
                                </ul>  
                            </li>  
                            <li class="file">index.css</li>  
                            <li class="file">main.css</li>  
                            <li class="folder:empty">nav.css</li>  
                            <li class="file">normalizer.css</li>  
                        </ul>  
                    </li>  
                    <li class="file">vorlage.css</li>  
                </ul>  
            </div>  
        </nav>

Und hier ma der ganze CSS-Code:

#nav {  
    box-sizing: border-box;  
  
    width:330px;  
    background-color: #c0c0c0;  
    float:left;  
  
    position: absolute;  
    top:80px;  
    left:0;  
  
    padding: 10px;  
}  
#navigation{  
    background-color: #ffffff;  
    box-shadow: 0px 0px 20px 5px #9d9d9d;  
    -webkit-box-shadow: 0px 0px 20px 5px #9d9d9d;  
    -moz-box-shadow: 0px 0px 20px 5px #9d9d9d;  
    margin:0;  
    overflow: scroll;  
}  
#navigation ul{  
    margin: 0;  
    padding: 0;  
}  
#navigation li{  
    list-style: none;  
    margin-left: 30px;  
}  
#navigation img{  
    margin-right: 4px;  
}  
#nav_list ul{  
    display: none;  
}