垂直選單

by ken tsai

HTML

<h3>CSS3 Vertical Menu With Sub Menus</h3>

    <nav id="menu">
        <ul class="parent-menu">
            <li><a href="#">Home & Kitchen</a>
                <ul>
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3 with submenu</a>
						<ul>
							<li><a href="#">item</a></li>
							<li><a href="#">Even more</a>
								<ul>
									<li><a href="#">item</a></li>
									<li><a href="#">item</a></li>
									<li><a href="#">item</a></li>
									<li><a href="#">item</a></li>
									<li><a href="#">item</a></li>
								</ul>							
							</li>
							<li><a href="#">item</a></li>
							<li><a href="#">item</a></li>
							<li><a href="#">item</a></li>
						</ul>					
					</li>
                    <li><a href="#">item4</a></li>
                    <li><a href="#">item5</a></li>
                    <li><a href="#">item6</a></li>
                </ul>
            </li>
            <li><a href="#">Electronics</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul></li>
            <li><a href="#">Clothing</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul></li>
            <li><a href="#">Cars & Motorbikes</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul>
            </li>
            <li><a href="#">Books</a>
                <ul>
           ...

CSS

p, ul, li, div, nav
        {
            padding:0;
            margin:0;
        }

        body
        {
            font-family:Calibri;
        }

        #menu {
            overflow: auto;
            position:relative;
            z-index:2;
        }

        .parent-menu {
            background-color: #0c8fff;
            min-width:200px;
            float:left;
        }

        #menu ul
        {
            list-style-type:none;
        }

        #menu ul li a
        {
            padding:10px 15px;
            display:block;
            color:#fff;
            text-decoration:none;
        }

          /*   #menu ul li a:hover */
/*觸動第二層時，也要保持第一層的active狀態*/
#menu ul li:hover, #menu ul li a:hover {
            
                background-color:#007ee9;
            }

/*sub-menu*/
            #menu ul li:hover > ul {
    /*讓下一層選單秀出來*/
    left: 200px;
    
                -webkit-transition: left 200ms ease-in;
                -moz-transition: left 200ms ease-in;
                -ms-transition: left 200ms ease-in;
                transition: left 200ms ease-in;
            }

            #menu ul li > ul {
                position: absolute;
                background-color: #333;
                top: 0;
                /*讓下一層的選單hide*/
                left: -200px;
                min-width: 200px;
                z-index: -1;
                height: 100%;
    
    
                -webkit-transition: left 200ms ease-in;
                -moz-transition: left 200ms ease-in;
                -ms-transition: left 200ms ease-in;
                transition: left 200ms ease-in;
            }

            #menu ul li > ul li a:hover
            {
                background-color:#2e2e2e;
            }