Sleek CSS Unordered List Styles

Modern <ul>'s

HTML

<ul class="rounded-list">
    <li><a href="">List item</a></li>
    <li><a href="">List item</a>
        <ul>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
        </ul>
    </li>
    <li><a href="">List item</a></li>
</ul>

<ul class="rectangle-list">
    <li><a href="">List item</a>
        <ul>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
        </ul>
    </li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>            
</ul>


<div id="footer">
    <p>Unless otherwise noted, this content is licensed under a <a href="http://creativecommons.org/licenses/by/3.0" target="_new">Creative Commons Attribution 3.0 License</a>.<br />Visit <a href="http://jenniferperrin.com/blog" target="_new">www.jenniferperrin.com</a> for more <a href="http://jenniferperrin.com/blog/snippets/">Snippets</a> and <a href="http://jenniferperrin.com/blog/category/tutorial/">Tutorials</a>.</p>
</div>

CSS

body {
    background: url("http://jenniferperrin.com/image/background.gif");
    margin: 20px auto;
    width: 250px;
}

/* -------------------------------------- */

ul {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 2em;
    text-shadow: 0 1px 0 rgba(34,34,34,.5);
}

ul ul {
    margin: 0 0 0 2em;
}

/* -------------------------------------- */            

.rounded-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #444;
    color: #efefef;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;    
}

.rounded-list a:hover {
    background: #222;
}

.rounded-list a:hover:before{
    background: #d46a15;
}

.rounded-list a:before {
    content: '';
    position: absolute;    
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #bf4c24;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #222;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

/* -------------------------------------- */

.rectangle-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #222;
    color: #efefef;
    text-decoration: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s...