How can I loop over this multi dimensional array?

Question

So Im trying to loop over an array of categories and sub-categories but Im having trouble with the foreach loop . Once I've got the array working Im going to create a menu where if you hover over a category, sub categories appear.

Put it this way, Im hopeless at the logic side of things :| This is my array along with the loops I've tried:

$categories = array(
        'arr' => array(
           'cat'=>'sport',
           'subcats'=> array(
               "surfing", "basketball", "nfl", "afl"
            )
        ),
        'arr' => array(
           'cat'=>'Automotive',
           'subcats'=> array(
               "cars", "f1", "bikes", "etc"
            )
        ),
        'arr' => array(
           'cat'=>'comedy',
           'subcats'=> array(
               "stand up", "pranks", "...", "test"
            )
        )

  );


  //Loop1
  foreach ($categories as $key => $value) {
        if($key == "arr"){
            foreach ($key as $key => $value) {
                echo $value;
                if($key == "cat"){
                    echo "cat";
                }
                else{
                    echo $value;
                }
            }
            // echo $key . "<br />";
            // if($key == 'subcats'){
            // echo "________".$key."<br />";
            // }
        }
    }


    //Attempt number 2
    foreach ($categories as $key => $value) {
        if($key == "arr"){
            while($key){
                echo $value;
                if($key == "cat"){
                    echo $value;
                }
                if($key == "subcats"){
                    while($key){
                        echo $value[$key];
                    }
                }
            }
        }
    }

Updated code that I tried after this

This works okay but only problem is that it will only loop through the last arr=>array() and not any of the ones before.

$i=0;
    foreach ($categories as $key => $value) {
    if($key == "arr"){
        foreach ($categories['arr'] as $sub => $val) {
            if($sub == "cat"){
                echo $val . " => ";
            }
            else if($sub == "subcats"){
                for($i=0; $i<4; $i++){
                    echo $val[$i] . ", ";
                }
            }
        }
    }
}

Answer 1

If you can reorganize your array, you can stick the categories as keys, subcategories as values:

$categories = array(
        'sport' => array(
               "surfing", "basketball", "nfl", "afl"
        ),
        'Automotive' => array(
               "cars", "f1", "bikes", "etc"
        ),
        'comedy' => array(
               "stand up", "pranks", "...", "test"
            )
  );
 // Here is an imploded list, you don't need a second loop then
 foreach($categories as $cat => $subcat) {
        echo "<h1>".$cat."</h1>";
        echo '<ul>';
        echo '<li>'.implode('</li>'.PHP_EOL.'<li>',$subcat).'</li>';
        echo '</ul>';
    }