January 17, 2011

<ul> within another <ul> inherits style

Question by JamWaffles

I have the following structure in some HTML:

<ul class="li_inline">
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
</ul>

With the CSS like this:

.li_inline li
{
    display: inline;
}

.li_block li
{
    display: block;
}

What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).

Can someone suggest some CSS I can use so that the inner (li_block) lists’ <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?

Thanks,

James

Answer by Starx

Use a reset rule.

ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }

In your case using the !important can get your job done. But try not to use it

UPDATE

Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!