将垂直菜单设为子菜单

Question

我有以下代码，我使用相关的CCS创建垂直菜单，现在效果很好我想让它成为一个子垂直菜单，所以我可以添加项目，如果有的话。

HTML代码：

<div class="sidewidt">
    <h2 class="heading2"><span>Categories</span></h2>
    <ul class="nav nav-list categories">
        <li>
            <a href="category.html">Men Accessories</a>
            <ul>
                <li><a>Hello</a></li>
                <li><a>World</a></li>
            </ul>
        </li>
        <li>
                <a href="category.html">Women Accessories</a>
        </li>
        <li>
                <a href="category.html">Computers </a>
        </li>
        <li>
                <a href="category.html">Home and Furniture</a>
        </li>
        <li>
                <a href="category.html">Others</a>
        </li>
    </ul>
</div>

这是相关的CSS，我想我必须修改css才能使它工作但是现在我真的很困惑。

ul.categories {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    padding-top: 10px;
    padding-bottom: 10px
}
ul.categories li {
    display: block;
    border-bottom: 1px dashed #E7E7E7
}
ul.categories li:last-child {
    border: none
}
ul.categories li a {
    display: block;
    padding: 11px 5px 11px 30px;
    background: url("../img/arrowcategory.png") no-repeat scroll 10px center transparent;
    color: #999999
}
ul.categories li a.active {
    color: #f25c27
}
ul.categories li a:hover {
    background-image: url("../img/arrowcategory.png") no-repeat scroll 10px center transparent;
    color: #333
}