JQuery 纵向二级菜单与对齐方式

1.效果：

2.代码：

style部分：

<style type="text/css">
  /*  ul{margin: 0; padding: 0;}*/
    ul{list-style: none;}
    .UL{width: 100px; text-align: center;}
    .UL2{font-size: 13px; width: 100px; color: #00a0e9; display: none;}
</style>
div部分：

<div >
    <ul class="UL">
        <li class="item">
            一级菜单1
            <ul class="UL2">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
            </ul>
        </li>
        <li class="item">
            一级菜单2
            <ul class="UL2">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
            </ul>
        </li>
        <li class="item">
            一级菜单3
            <ul class="UL2">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
            </ul>
        </li>
    </ul>
</div>
3.js部分：

<script type="text/javascript">
    $(document).ready(function() {
        $(".item").click(function(){
            $(this).find(".UL2").slideToggle();
            $(this).siblings('.item').find('.UL2').slideUp();
        });
    });

</script>

个人项目实践：

为了使二级菜单对齐，ul2样式重新设置边距：

padding:0; margin:0;border-right:0px;

为了使菜单有边框：加入边线

border-right:1px solid #ccc;
为了使二级目录没有边线，在二级目录样式里增加右边线的大小为0

border-right:0px;