Heim >Web-Frontend >HTML-Tutorial >css 第N级列表选择控制_html/css_WEB-ITnose
css 第N级列表选择控制_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:23:371028Durchsuche
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”后面就把 给结尾了，没有包含子
- ，哈哈哈，真的很感谢
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：怎么让img 的宽度不要超过 div_html/css_WEB-ITnoseNächster Artikel：html清除浮动后样式依旧错误。。怎么破，求解_html/css_WEB-ITnose