CSS菜单实现

标签：style   color   io   os   ar   sp   on   cti   ad   

只含一层的菜单

    <nav class="list1">
        <ul>
            <li><a href="#">a</a></li>
            <li><a href="#">b</a></li>
            <li><a href="#">c</a></li>
            <li><a href="#">d</a></li>
            <li><a href="#">e</a></li>
        </ul>
    </nav>

一层纵向菜单

    li {list-style:none;}(默认圆点不美观)
    列表项之间设置border
    a {text-textdecoration:none;}(默认下划线不美观)
    a:hover也要重新设置
    a {display:block;}把a的区域扩充到父元素

一层横向菜单

    ul {overflow:hidden;}(内容一多溢出就不可见了)
    li {float:left;}
    a {display:block;}扩充点击区域至整个父元素

多层嵌套的菜单

    <nav class="multi_drop_menu">
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">1</a>
                    <ul>
                        <li><a href="#">2</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">2</a>
                            <ul>
                                <li><a href="#">3</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">2</a></li>
                    </ul>
                </li>
            </ul>
    </nav>



多层嵌套下拉菜单

            .multi_drop_menu * {
                margin:0;
                padding:0;
                }/*减少原来的内外边距对布局的影响*/
            .multi_drop_menu {
                font:1em helvetica, arial,/*微软的无衬线字体*/ sans-serif;/*无衬线字体*/
            }
            .multi_drop_menu a {
                display:block;/*链接区域扩充到整个容器*/
                color:#555;
                background-color:#eee;
                padding:.2em 1em;/*1em相当于body的font-size大小，默认情况下为16px，当然可以修改*/
                border-width:3px;
                border-color:transparent;
            }
            .multi_drop_menu a:hover {
                color:#fff;
                background-color:#aaa;
            }
            .multi_drop_menu a:active {
                color:#ccc;
                background:#fff;/*背景相关的都能写到background里面来*/
            }

            .multi_drop_menu ul {
                float:left;
            }
            .multi_drop_menu li {
                float:left;
                position:relative;/*给子元素的absolute定位提供定位上下文*/
                list-style:none;
            }
            .multi_drop_menu li:last-child a {
                border-right-style:none;
            }
            .multi_drop_menu li a {
                display:block;
                border-right-style:solid;
                background-clip:padding-box;/*选定背景显示的盒子区域*/
                text-decoration:none;
            }

            .multi_drop_menu li ul {
                width:9em;
                display:none;/*默认不显示，hover时显示*/
                position:absolute;
                left:0;
                top:100%;
            }
            .multi_drop_menu li:hover > ul {
                display:block;
            }/*>左边的只能是父元素*/
            .multi_drop_menu li li {
                float:none;
            }
            .multi_drop_menu li li a {
                border-right-style:none;
                border-top-style:solid;
            }
            .multi_drop_menu li li ul {
                display:none;
            }

            .multi_drop_menu li li ul {
                position:absolute;
                left:100%;
                top:0;
            }

            .multi_drop_menu.vertical li {
                float:none;
            }
            .multi_drop_menu.vertical li ul {
                left:100%;
                top:0;
            }

CSS菜单实现

标签：style   color   io   os   ar   sp   on   cti   ad   

原文地址：http://www.cnblogs.com/cyberpaz/p/4032739.html