How to indent sub menu in dropdown select - WordPress

Question

Im working on a wordpress menu and trying to indent the submenus away from its parent in my dropdown select box.

This is how it looks like in my dropdown select box:

Urban Zone

Urban A

Urban B

Urban C

Development

Development A

Development B

Development C

What I want it to look like:

Urban Zone

--Urban Zone A

--Urban Zone B

--Urban Zone C

Development

--Development A

--Development B

--Development C

Here are my codes for dropdown on mobile.php:

         <?php if ( has_nav_menu( 'MobileMainNav' ) ) { ?>
         <?php wp_nav_menu( array(
                 'theme_location' => 'MobileMainNav'
                 ,'walker' => new Walker_Nav_Menu_Dropdown()
                 ,'items_wrap' => '<form><select id="drop-nav" onchange=""><option value="">Select a page ...</option>%3$s</select></form>'
                    ));
                    }
          ?>

Code for functions.php

    class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth){
            $indent = str_repeat("\t", $depth);
    }
    function end_lvl(&$output, $depth){
            $indent = str_repeat("\t", $depth);
    }

    function start_el(&$output, $item, $depth, $args) {
            $url = '#' !== $item->url ? $item->url : '';

            $output .= '<option value="' . $url . '">' . $item->title;
    }
    function end_el(&$output, $item, $depth){
            $output .= "</option>\n";
    }

}

Answer 1

Problem solved. I simply added the following code in the start_el function

function start_el(&$output, $item, $depth, $args) {
         $item->title = str_repeat("-", $depth * 2) . $item->title;
}