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;