مشکل با لیست های تو در تو

[woeful]

سلام
من با استفاده از CSS میخام یک لیست تو در تو درست کنم که با زیاد شدن لیست های زیر مجموعه اون اگر از طول div پدر بزرگتر شد scroll بخوره

به عنوان مثال :

<div class="tree">
<ul>
<li class="parent"><div>HOME</div>
<ul style="display:block">
<li><div><div class="t-arrow">--</div><div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div></div></li>
</ul>
</li>
</ul>
</div>



.tree{
font-size: 12px;
margin:auto auto;
height: 200px;
position: relative;
border:2px solid gray;
width:17%;
overflow-x:auto;
overflow-y:auto;
}
.tree ul {
list-style: none outside none;
margin-left:10px;
width:100%;
}
.tree li div{
display:block;
}
.tree li>div
{
padding:3px 3px 3px 8px;
}
.tree li>div:hover{
background-color:rgba(204, 255, 255, 0.5);
}
.tree li{
cursor:pointer;
margin:1px 0 1px -35px;
}
.tree > ul > li > div {
color: #3B4C56;
display: block;
}
.tree ul li ul {
border-left: 1px solid #D9DADB;
display: none;
}




اینم عکس :

126019

که همونطور که مبیبنید نوشته bbbb... میاد پایین و کنار اون فلش نیست.
اگر هم که اندازه نوشته bbbbb ... کوچمتر از div پدر باشه به صورت زیر :
126020
نوشته جاش درست میشه و میاد کنار فلش ولی بازم div پدر scroll داره

شاید بگید چرا اینقد css نوشته من میخام یه طوری ساخته بشه که بعدا اگر خواستم یه زیر لیست دیگه به صورت داینامیک به این لیست اضافه کنم دیگه استایلشو دست نزنم

ممنون میشم کمک کنید.

[farzaneh1988jafary]

سلام

.tree li div {display: inline;}