ホームページ >ウェブフロントエンド >htmlチュートリアル >css レベル N リスト選択 control_html/css_WEB-ITnose
css レベル N リスト選択 control_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:23:371058ブラウズ
css ul liselection list
CSSにおける多層リストの選択と制御について教えてください。効果は写真の通りです。
第 1 レベルのメニューを水平方向に配置し、第 2 レベル、第 3 レベル、および第 4 レベルのメニューを垂直方向に配置します。
各レベルのフォントのサイズと色が異なります。CSS では理解できません。助けていただきたいです。
ディスカッション（解決策）への返信
インターネット上には Infinitus はあまりありません。
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 のネストされた宣言は、レイヤーの数だけネストできます
。
ありがとうございます。
上の階の皆様もありがとうございました。 問題は & lt; クラス = "メニュー"
& lt; サブメニュー レベルです。 & lt;/li & gt;
「メインメニュー 1」は で終わり、サブ子
- は含まれません、ははは、ありがとうございます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。