CSS - hierarchical list background problem
I have a list with CSS and HTML at

http://jsfiddle.net/RyYem/2/

**Problem**

Now listen very carefully.

 - The the list item link texts should be indented like it is in the code.
 - The background to the list items OR anchor tags should start from the left edge and end to the right edge.
 - Look at this screenshot of an example: http://crazyindian.yolasite.com/resources/owa-screenshot.jpg. Down to the left it says "Inbox", "Calendar" and so on. Ignore the icons and look at the background. It's set from the left edge to the right. It should look a bit like that even when text is indented in my list.
 - Notice that some li-elements contains more than an anchor-tag. That's why it don't work perfectly to set a background to the li-elements.
 - I added backgrounds to both li and a-elements just to show how it looks. One of them is enough (look at the example).

**Accepted answers**

 - CSS2
 - CSS3
 - jQuery
 - Hints

**Not accepted answers**

 - Change in the HTML

**HTML - Fallback if jsfiddle don't work**

    <ul>
    <li class="widget_categories">
        <h4>Kategorier</h4>
        <ul> 
            <li>
                <a href="#">Belysning &amp; lampor</a> 
            </li> 
            <li>
                <a href="#">Datorer &amp; tillbehör</a> 
                <ul class='children'> 
                    <li>
                        <a href="#">iPad-tillbehör</a> 
                    </li> 
                    <li>
                        <a href="#">USB-tillbehör</a> 
                    </li> 
                </ul> 
            </li> 
            <li>
                <a href="#">Filmkameror</a> 
                <ul class='children'> 
                    <li>
                        <a href="#">Spionkameror</a> 
                    </li> 
                </ul> 
            </li> 
            <li>
                <a href="#">Hörlurar</a> 
            </li> 
            <li>
                <a href="#">Kameror &amp; tillbehör</a> 
            </li> 
            <li>
                <a href="#">Övrigt</a> 
            </li> 
        </ul> 
    </li> 
    </ul>

**CSS - Fallback if jsfiddle don't work**

    * {
        margin: 0;
        padding: 0;
    }

    .widget_categories li, .widget_categories li a {
        font: normal 11px/18px Arial;
        color: #fff;
        text-decoration: none;
    }

    .widget_categories li {
        margin-left: 20px;
        display: block;
    
        background: #7d7e7d; /* old browsers */
        background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* firefox */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* webkit */

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* ie */

        background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* opera */
    
    }
    .widget_categories li a {
        background: #a7cfdf; /* old browsers */
        background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* firefox */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* webkit */

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* ie */

        background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* opera */
        display: inline-block;
        padding: 5px;
    }



CSS - hierarchical list background problem
===

I have a list with CSS and HTML at

http://jsfiddle.net/RyYem/2/

**Problem**

Now listen very carefully.

 - The the list item link texts should be indented like it is in the code.
 - The background to the list items OR anchor tags should start from the left edge and end to the right edge.
 - Look at this screenshot of an example: http://crazyindian.yolasite.com/resources/owa-screenshot.jpg. Down to the left it says "Inbox", "Calendar" and so on. Ignore the icons and look at the background. It's set from the left edge to the right. It should look a bit like that even when text is indented in my list.
 - Notice that some li-elements contains more than an anchor-tag. That's why it don't work perfectly to set a background to the li-elements.
 - I added backgrounds to both li and a-elements just to show how it looks. One of them is enough (look at the example).

**Accepted answers**

 - CSS2
 - CSS3
 - jQuery
 - Hints

**Not accepted answers**

 - Change in the HTML

**HTML - Fallback if jsfiddle don't work**

    <ul>
    <li class="widget_categories">
        <h4>Kategorier</h4>
        <ul> 
            <li>
                <a href="#">Belysning &amp; lampor</a> 
            </li> 
            <li>
                <a href="#">Datorer &amp; tillbehör</a> 
                <ul class='children'> 
                    <li>
                        <a href="#">iPad-tillbehör</a> 
                    </li> 
                    <li>
                        <a href="#">USB-tillbehör</a> 
                    </li> 
                </ul> 
            </li> 
            <li>
                <a href="#">Filmkameror</a> 
                <ul class='children'> 
                    <li>
                        <a href="#">Spionkameror</a> 
                    </li> 
                </ul> 
            </li> 
            <li>
                <a href="#">Hörlurar</a> 
            </li> 
            <li>
                <a href="#">Kameror &amp; tillbehör</a> 
            </li> 
            <li>
                <a href="#">Övrigt</a> 
            </li> 
        </ul> 
    </li> 
    </ul>

**CSS - Fallback if jsfiddle don't work**

    * {
        margin: 0;
        padding: 0;
    }

    .widget_categories li, .widget_categories li a {
        font: normal 11px/18px Arial;
        color: #fff;
        text-decoration: none;
    }

    .widget_categories li {
        margin-left: 20px;
        display: block;
    
        background: #7d7e7d; /* old browsers */
        background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* firefox */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* webkit */

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* ie */

        background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* opera */
    
    }
    .widget_categories li a {
        background: #a7cfdf; /* old browsers */
        background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* firefox */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* webkit */

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* ie */

        background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* opera */
        display: inline-block;
        padding: 5px;
    }


