How to make a staggered submenu for a html animated dropdown box

Question

// I want my dropbox submenu to look..
Like
This
Here!
/* I tried spaces like above, they just were ignored. I tried quotes'' "both of them' ', and that did work kinda..*/
I
' Got'
" This"
/* Any advise as to how to do this will be appreciated...advice on why not to style a list like that wont be.*/

Answer 1

You have many way to achive that... by using padding, margin or others css properties, with siblings elements or nested ones...
I don't have understand you you want or not a solution with styling <ul><li> elements ( wich is useful, and semanticaly proper/suitable ), so I put just two examples without:

.t1 { margin-left:3ex; }
.t2 { margin-left:6ex; }
.t3 { margin-left:9ex; }

<span class="t1">item 1</span><br>
<span class="t2">item 2</span><br>
<span class="t3">item 3</span>

<div class="t1">
item 1
<div class="t1">
item 2
<div class="t1">
item 3
</div>
</div>
</div>

Notice that in the second one, we use only one class: due to the nested structure, the margin sums inside each others.
You can put a border to each class, to visually better understand:

.t1, .t2, .t3 { border:1px solid red; }

Try to replace 'margin' by 'padding' to view the distinction...

These two properties shift box and/or content on all the height. You can use 'text-indent' to set a shift at first line only.

Others solutions exists, by variation of these, positioning... and so on ;)

Answer 2

@visph Thanks for the help.. I really appreciate it.