How to indent text in a select drop down menu using PHP & CSS? [REPHRASED]

Tags: php,mysql,css,xhtml

Problem :

I asked a similar question earlier but I'll ask it again in a different way. How can I indent categories and endless sub categories that I have in a select drop down menu using PHP & CSS?

Here is my PHP code.

while (list($id, $parent_id, $category) = mysqli_fetch_array($r, MYSQLI_NUM)) {

    // Add to the select menu:
    echo '<option value="' . $id . '">' . $category . '</option>\n';


Here is the output.

   1. Apple
   2. Arts & Entertainment
         1. Amusement
         2. Art
         3. Artists
               1. A
                     1. a1
                     2. a2
               2. B
               3. C
               4. D
   3. Automotive
   4. Network
   5. Server
   6. Web Design
         1. CSS
         2. HTML

The numbers are just there to see the categories and sub categories easier.

Solution :

In the past I've done this by prepending &nbsp; to the content of each nested option.

$spacer = '&nbsp;&nbsp;';

while (list($id, $parent_id, $category) = mysqli_fetch_array($r, MYSQLI_NUM)) {

    $padding = str_repeat($spacer, $depth);

    // Add to the select menu:
    echo '<option value="' . $id . '">' . $padding . $category . '</option>\n';


Where $depth represents the 'steps' an option should be indented.

The way I accomplished this was to first put my options into a multidimensional array where children are stored as an array of their parent's...

Like this:

     1 => Array( 
          'name' => 'Apple'
     2 => 'Arts & Entertainment',
          'children' => Array(
               1 => Array(
                    'name' => 'Amusement'
               2 => Array(
                    'name' => 'Art'
               3 => Array(
                    'name' => 'Artists'
                    'children' => Array(
                         1 => Array(
                              'name' => 'A',
                              'children' => Array(
                                   1 => Array(
                                         'name' => 'a1'

Then I run through the array with a recursive function that steps into each nested array (if present) and appends the $padding to the 'name' value, wraps the option tags around it then returns it. The returned string is appended to the return from all previous calls, and you're left with an indented option menu. Magic.

    CSS Howto..

    how to make a list float left or not according to the size of the browser?

    How do you square off only one corner of a div to be transparent in CSS?

    How to rotate and fade background images in and out with javascript/ASP.NET/CSS

    how to show section of a CSS sprite within a set position on the whole html body

    How can I add a transition effect when opening my custom modal window?

    background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    How do I make my picture slideshow stay behind my header

    how to build a mobile site - basics, is it all CSS?

    how to animate icon fa-circle using CSS to look as recording video blinking red dot?

    How to feather the edges of an image using CSS

    div not showing above text box

    How to make div css background hover

    How to use CSS :hover to make extra div block elements display?

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    How to create triple div border in CSS

    How to write function in css

    Javascript: how to append more text to user copied text ala

    How To Center Align Menu Through CSS?

    CSS: How does youtube change its appearance based on screen size?

    How can I use CSS to center text in DIV

    how i can select some attribute value from in line css

    How to prevent an empty img element from shrinkage?

    How to restrict CSS animation to a certain div?

    How can I count CSS page breaks for printed HTML?

    How to clear the parent css

    HTML/CSS - Input [Text] How to disable the browser from offering suggestings in the Dropdown?

    How to align a menu bar using css and html? [closed]

    How to adjust CSS to make footer fixed height?

    float css only menu - how to modify on section2

    how can I make div have auto height according to content