Dashed-styled list linking divs

Vote count:

0

I don't know exactly how to name this or how to explain it, so I'll give you some examples of what I have and what I want to create...

I have a list of divs, all of them with an own style, in a way that they look as Forums and sub-forums... Here I'll show a picture of what I have:

The code is simple:

<div id="Forums">
    <div class="category">Category</div>
    <div class="forum">Forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
</div>

And the css is also very easy:

.category {
    width: 95%;
    height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
    margin: 2em;
    margin-bottom: 0;
}
.forum {
    width: auto;
    height: 3em;
    background-color: rgba(30, 101, 141, 0.67);
    border: dotted;
    margin-left: 4em;
}

.sub-forum {
    width: auto;
    height: 3em;
    background-color: rgba(12, 50, 69, 0.67);
    border: dotted;
    margin-left: 7em;
}

I was thinking of making a design so the categories, the forums and sub-forums are linked with a dashed-styled "list"... I don't know how to describe it, so I've made a blueprint:

Is it possible to acquire this with only css? How can I do it?

Thanks!

asked 45 secs ago

peregraum

46