CODEWITHSUNDEEP
css
czervik
czervik

Reputation: 2555

Horizontal list with nested lists that display vertically

I'd like to display the following:

 <ul class="parent">
    <li>a
        <ul class="child">
            <li>a1</li>
            <li>a2</li>
            <li>a3</li>
        </ul>
    </li>
    <li>b
        <ul class="child">
            <li>b1</li>
            <li>b2</li>
            <li>b3</li>
        </ul>
    </li>
</ul>

Like this:

*a        *b
  *a1       *b1
  *a2       *b2
  *a3       *b3

I've tried a few variations of using inline and float, but can't find a way get the child menus to expand vertically and line up right using CSS.

Upvotes: 4

Views: 3401

Answers (2)

MattAllegro
MattAllegro

Reputation: 7345

Since I would avoid floats without clear when possible, I gave a try to the following CSS (same HTML, Fiddle here):

.parent > li {
    display: inline-block;
    margin-right: 30px;
}

.parent > li:before {
    font-size: 20px;
    content: '\00a0\2022\00a0\00a0';
}
<ul class="parent">
    <li>a
        <ul class="child">
            <li>a1</li>
            <li>a2</li>
            <li>a3</li>
        </ul>
    </li>
    <li>b
        <ul class="child">
            <li>b1</li>
            <li>b2</li>
            <li>b3</li>
        </ul>
    </li>
</ul>

Upvotes: 0

kei
kei

Reputation: 20471

HTML (fixed)

<ul class="parent">
    <li>a
        <ul class="child">
            <li>a1</li>
            <li>a2</li>
            <li>a3</li>
        </ul>
    </li>
    <li>b
        <ul class="child">
            <li>b1</li>
            <li>b2</li>
            <li>b3</li>
        </ul>
    </li>
</ul>

CSS

.parent > li {
    float: left;
    width: 100px;  
}

.child > li {
    padding-left: 20px; /* not needed if you don't reset your css */
}

Upvotes: 5

Related Questions