css 第N级列表选择控制_html/css_WEB-ITnose-html教學-PHP中文網

回复讨论(解决方案)

首頁

web前端

html教學

css 第N级列表选择控制_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:23 PM

css ul li 选择列表

请教各位，关于CSS中对多层列表的选择和控制。

效果如图片。

让一级菜单横排，二三四跟着一级竖排。

每级的字体大小和颜色都不同，CSS实在是弄不好，请求帮助，挺着急的，谢谢了。

回复讨论(解决方案)

网上不是很多无限极的啊。

http://www.neoease.com/tutorials/wordpress-menubar/wordpress-menubar-5/

此类问题你以后可以分析
你的菜单其实一共只有2个级别
主菜单：横向
字菜单：纵向

主菜单可以嵌套包含子菜单
子菜单可以嵌套包含子菜单
在下去就是子菜单的层次问题只要css的嵌套声明即可有几层就嵌套声明几次

<!--To change this template, choose Tools | Templatesand open the template in the editor.--><!DOCTYPE html><html>    <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <style>            .menu{ /**主菜单区域*/                list-style: none;                padding: 0;                margin: 0;            }            .menu>li{ /**主菜单 菜单项*/                display: block;                float: left;                color: red;                text-align: center;            }            .menu>li ul{            /**统一所有子菜单样式*/                list-style: none;            }            .menu>li>ul{ /**子菜单区域 1级别*/            }            .menu>li>ul>li{ /**子菜单 1级 菜单项*/                color: green;            }            .menu>li>ul>li>ul{ /**子菜单区域 2级别*/            }            .menu>li>ul>li>ul>li{ /**子菜单 2级 菜单项*/                color: blue;            }            .menu>li>ul>li>ul>li>ul{ /**子菜单区域 3级别*/            }            .menu>li>ul>li>ul>li>ul>li{ /**子菜单 3级 菜单项*/                color: #ccc;                font-size: 10px;            }            /**下面可以依照上面的类推*/        </style>    </head>    <body>        <ul class="menu">            <li>                主菜单1                <ul>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>            <li>                主菜单2                <ul>                    <li>子菜单1级                        <ul>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                        </ul>                    </li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>            <li>                主菜单3                <ul>                    <li>子菜单1级                        <ul>                            <li>子菜单2级                                <ul>                                    <li>子菜单3级</li>                                    <li>子菜单3级</li>                                    <li>子菜单3级</li>                                </ul>                            </li>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                        </ul>                    </li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>        </ul>    </body></html>

登入後複製

<!--To change this template, choose Tools | Templatesand open the template in the editor.--><!DOCTYPE html><html>    <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <style>            .menu{ /**主菜单区域*/                list-style: none;                padding: 0;                margin: 0;            }            .menu>li{ /**主菜单 菜单项*/                display: block;                float: left;                color: red;                text-align: center;            }            .menu>li ul{            /**统一所有子菜单样式*/                list-style: none;            }            .menu>li>ul{ /**子菜单区域 1级别*/            }            .menu>li>ul>li{ /**子菜单 1级 菜单项*/                color: green;            }            .menu>li>ul>li>ul{ /**子菜单区域 2级别*/            }            .menu>li>ul>li>ul>li{ /**子菜单 2级 菜单项*/                color: blue;            }            .menu>li>ul>li>ul>li>ul{ /**子菜单区域 3级别*/            }            .menu>li>ul>li>ul>li>ul>li{ /**子菜单 3级 菜单项*/                color: #ccc;                font-size: 10px;            }            /**下面可以依照上面的类推*/        </style>    </head>    <body>        <ul class="menu">            <li>                主菜单1                <ul>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>            <li>                主菜单2                <ul>                    <li>子菜单1级                        <ul>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                        </ul>                    </li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>            <li>                主菜单3                <ul>                    <li>子菜单1级                        <ul>                            <li>子菜单2级                                <ul>                                    <li>子菜单3级</li>                                    <li>子菜单3级</li>                                    <li>子菜单3级</li>                                </ul>                            </li>                            <li>子菜单2级</li>                            <li>子菜单2级</li>                        </ul>                    </li>                    <li>子菜单1级</li>                    <li>子菜单1级</li>                </ul>            </li>        </ul>    </body></html>

登入後複製

非常感谢，一下觉悟了，真的很感谢！

同时感谢楼上的各位。

我的问题出在