how to style navigation sub-menu? I need to display dash (-) in front of each sub-menu element. For example, the output should be 

&lt;ul class="menu clearfix"&gt;
  &lt;li class="first leaf"&gt;&lt;a title="" href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="expanded active-trail"&gt;&lt;a class="active-trail active" title="" href="/about-us"&gt;About&lt;/a&gt;
  &lt;ul class="menu clearfix"&gt;
     &lt;li class="first leaf"&gt;&lt;a title="" href="/process"&gt;- Process&lt;/a&gt;&lt;/li&gt;
     &lt;li class="leaf"&gt;&lt;a title="" href="/process-101"&gt;- Process 101&lt;/a&gt;&lt;/li&gt;
     &lt;li class="last leaf"&gt;&lt;a title="" href="/compnay"&gt;- Compnay&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/li&gt;
  &lt;li class="last leaf"&gt;&lt;a href="/content/useful-links"&gt;Useful Links&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;


I tried the following:

function theme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
     $sub_menu = drupal_render($element['#below']);
   }

   $output = l($element['#title'], $element['#href'], $element['#localized_options']);
   return '&lt;li' . drupal_attributes($element['#attributes']) . '&gt;' . $output . $sub_menu . "&lt;/li&gt;\n";
  }
You can do this with CSS

ul.menu ul.menu li a:before {
  content: "- ";
}


Or, you can do something similar with list-style-image or a background-image.

Keeping stuff like that out of markup makes things cleaner.