So i build a website using bootstrap. The problem is that i have nested drop downs. The link below is image for dropdowns that look nice and not cluttered in desktop version.
However this is how it looks in mobile:
They look cluttered, and you can't fold/unfold the deepest level of dropdowns. It just doesn't allow this.
I'm thinking there are better ways to represent information in mobile view. My approach was when person touches 'buildings/land' tab, i replace bottom navbar with contents of Buildings/Land, thus reducing one level of dropdowns.
Question: I'm really not experienced in developing UI. Is my approach sufficient? How should i solve this problem?