Separate line for children

Hi!
I am pretty new to CSS, PHP and HTML but im learning as i go!
I have searched for this but can’t find it.

I have a menu that looks like this

home | item1 | item2 | item3

All of the items has children. I want to be able to display it like thig

(being on item1)

home | item1 | item2 | item3
child1 | child2 | child3 | child 4

but with my code the children do not display in a separate row. instead it looks like this

home | item1 | item2 | item3 | child1 | child2 | child3 | child 4

my code looks lite this:

(in header.php)

[Code moderated as per the Forum Rules. Please use the pastebin]

Anyone know how to make it so that the children come on a separate line instead of the same as the parents? Also is it possible to stop the counting of children at depth = 2?

Thx!