Maison >interface Web >tutoriel HTML >css 第N级列表选择控制_html/css_WEB-ITnose
css 第N级列表选择控制_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:23:371027parcourir
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> 此类问题你以后可以分析
你的菜单其实一共只有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> 非常感谢，一下觉悟了，真的很感谢！
同时感谢楼上的各位。
我的问题出在
-
主菜单1
- 子菜单1级
在“主菜单1”后面就把 给结尾了，没有包含子
- ，哈哈哈，真的很感谢
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：怎么让img 的宽度不要超过 div_html/css_WEB-ITnoseArticle suivant：html清除浮动后样式依旧错误。。怎么破，求解_html/css_WEB-ITnose