Html 我想将此css代码转换为可折叠/可扩展列表

这是我的密码。我想转换或更改/添加这个css代码到类别的可折叠/可扩展列表中，而不更改它们的类名称和id名称。 作为主类别，必须使用项目符号/项目符号图像创建其所有子类别下的可折叠/可扩展列表

不要改变它的外观。如果可能，添加到该类或id

<style type='text/css'>
 #directory .catcol ul{list-style-type:none; padding:10px 8px}
 #directory .catcol{float:left; width:33%}
 #directory .catcol ul.maincat-list{}
 #directory .catcol ul li.maincat { border-bottom:1px solid #DDDDDD; font-weight:bold; padding:0 0 2px; text-transform:uppercase; margin-bottom:15px; }
 #directory .catcol ul li.maincat a{text-decoration:none;}
 #directory .catcol li.maincat > ul.subcat-list { border-top:1px solid #DDDDDD; border-bottom:1px solid #FFFFFF; margin-bottom:-3px; padding-bottom:8px; }
 #directory .catcol ul.subcat-list{padding:5px;}
 #directory .catcol ul li.cat-item{font-weight:normal; text-transform:none; background:transparent url(images/bullet-grey.png) no-repeat scroll 4px 6px; line-height:20px; padding:0 0 0 12px}
 #directory .catcol ul li.cat-item a{text-decoration:none; color:#545454;}
 #directory .catcol ul li.maincat a:hover, #directory .catcol ul li.cat-item a:hover{text-decoration:underline}
 #directory .catcol ul li{line-height:20px; padding:5px 0 2px 10px; text-shadow:0 1px 0 #FFFFFF;}
 #directory .catcol ul li.cat-item:hover{}
 #directory .catcol ul.children {list-style-type:none; padding:5px 0; margin:0 0 -10px -12px;}
 #directory .catcol ul.children li {background:transparent url(images/bullet-grey.png) no-repeat scroll 12px 11px; border-bottom:none; border-top:1px solid #EFEFEF;}
 #directory .catcol ul.children li a {margin-left:8px;}
 #directory.twoCol .catcol { width: 50%; }
</style>


<div id="directory" class="directory twoCol">
<div class="catcol  first">
    <ul class="maincat-list">
        <li class="maincat cat-item-32"><a href="http://example.com/automobiles/" title="">Automobiles</a>  
            <ul class="subcat-list"><li class="cat-item cat-item-33"><a href="http://example.com/cat/automobiles/cars/" title="">Cars</a></li></ul>
        </li>
        <li class="maincat cat-item-37"><a href="http://example.com/cat/home-lifestyle/" title="">Home &amp; Lifestyle</a>
            <ul class="subcat-list"><li class="cat-item cat-item-38"><a href="http://example.com/cat/home-lifestyle/clothing/" title="">Clothing</a></li></ul>
        </li>
        <li class="maincat cat-item-2"><a href="http://example.com/cat/misc/" title="">Misc</a>  </li></ul>
</div><!-- /catcol -->

<div class="catcol ">
    <ul class="maincat-list">
        <li class="maincat cat-item-8"><a href="http://example.com/cat/mobiles-phones/" title="">Mobiles Phones</a>
            <ul class="subcat-list"><li class="cat-item cat-item-9"><a href="http://example.com/cat/mobiles-phones/phones/" title="">Phones</a></li></ul>
        </li>
        <li class="maincat cat-item-13"><a href="http://example.com/cat/office-shops-space/" title="">Office / Shops / Space</a></li></ul>

</div><!-- /catcol -->
<div class="clr"></div></div>

#catcol ul{列表样式类型：无；填充：10px 8px}
#catcol{float:left；width:33%}
#目录.catcol ul.maincat列表{}
#directory.catcol ul li.maincat{border bottom:1px solid#dddddddd；字体大小：粗体；padding:0 0 2px；文本转换：大写；边距底部：15px；}
#directory.catcol ul li.maincat a{text装饰：无；}
#directory.catcol li.maincat>ul.subcat-list{边框顶部：1px实心#ddddddd；边框底部：1px实心#FFFFFF；边距底部：-3px；填充底部：8px；}
#directory.catcol ul.subcat列表{padding:5px；}
#catcol ul li.cat项{字体重量：正常；文本转换：无；背景：透明url（images/bullet grey.png）无重复滚动4px 6px；行高：20px；填充：0 12px}
#目录.catcol ul li.cat-item a{文本装饰：无；颜色：#5454；}
#directory.catcol ul li.maincat a:hover，#directory.catcol ul li.cat-item a:hover{text decoration:underline}
#catcol ul li{行高：20px；填充：5px 0 2px 10px；文本阴影：0 1px 0#FFFFFF；}
#目录.catcol ul li.cat项：hover{}
#directory.catcol ul.children{列表样式类型：无；填充：5px 0；边距：0 0-10px-12px；}
#directory.catcol ul.children li{背景：透明url（images/bullet grey.png）无重复滚动12px 11px；边框底部：无；边框顶部：1px实心#efefefef；}
#directory.catcol ul.children li a{左边距：8px；}
#directory.twoCol.catcol{width:50%；}

---

请…帮帮我

你试过什么吗？可能重复：