CSS で ul li ul li ul li を使用して 3 レベルの menu_html/css_WEB-ITnose を実装する方法-htmlチュートリアル-php.cn

css

多级菜单 body{ font-family:"微软雅黑"; font-size:12px; line-height:1.5; } ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd{ margin:0px; padding:0px; font-size:12px; font-weight:normal; } ul{ list-style:none; } img{ border-style:none; } a{ color:#000; text-decoration:none; } a:hover{ color:#ff0000; }

#menu2{ width:100px; border:1px solid #cccccc; margin-top:20px; } #menu2 ul{ list-style:none; margin:0px; padding:0px; } #menu2 ul li{ background:#eeeeee; padding:0px 24px; height:26px; line-height:26px; border-bottom:1px solid #cccccc; position:relative; } #menu2 ul li ul{ display:none; border:1px solid #cccccc; border-bottom:none; position:absolute; left:100px; top:0px; width:100px; } #menu2 ul li ul li{ background:#eeeeee; padding:0px 24px; height:26px; line-height:26px; border-bottom:1px solid #cccccc; position:relative; }

#menu2 ul li ul li ul{ display:none; border:1px solid #cccccc; border-bottom:none; position:absolute; left:100px; top:0px; width:100px; }

#menu2 ul li:hover ul{ display:block; }

#menu2 ul li ul li:hover ul{ display:block; }

网站首页 域名主机 域名注册 企业邮局 网站建设 企业网站 其它网站 行业网站 论坛程序 商城程序 联系我们 現状では、第 2 レベルのメニューが表示されると、何が問題になったのかわかりません。専門家の指導を求めています。よろしくお願いします...

ファイルは http://www.zjgqy.com.cn/t4.html にアップロードされました

ディスカッションへの返信 (解決策) #menu2 ul li:hover ul li ul{ display:none;} ログイン後にコピー ログイン後にコピー これを追加しないと、第 2 エピソードのメニューが表示されるときに第 3 のエピソードが表示されます。レベル UL が表示されます

#menu2 ul li:hover ul li ul{ display:none;} ログイン後にコピー ログイン後にコピー これを追加します。そうでない場合、第 2 エピソードのメニューが表示されるときに第 3 レベルの UL が表示されます

Dizzy88 に感謝します。返信では、この問題は解決されましたが、IE6 ではまだ問題が発生しています。どうすればよいかわかりません。もう一度見てみるのを手伝ってもらえますか？

#menu2 ul li.current ul{ display:block;} このスタイルと次の JS を追加しました startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("menu2") var allli = navRoot.getElementsByTagName ("li") for (i=0; i ノード = allli[i]; node.onmouseover=function() { this.className+=" current" } node.onmouseout=function() { this.className=this.className.replace(" current", ""); } } } window.onload=startList; この ie6 はその文をサポートしていません。a の疑似クラスのみをサポートしています。これにはJSを変更する必要がありますか?

これは JS コードに問題があるはずです。IE6 は疑似クラスをサポートしていないため、後から追加した「display」という文も無効です。 JSでそれに！

マウスが第 2 レベルのメニューに移動しても、第 3 レベルのメニューは非表示にならないためです

#div1 ul li:hover ul li ul{display:none}&lt である限り;/style>

以前の ID を自分の ID に変更してください #menu2 ul li.current ul{

display:block;} このスタイルと次の JS を追加します <!--

startList = function() { if (document.all&&document.getElementById) {

navRoot = document. getElementById("menu2"); var allli = navRoot.getElementsByTagName("li") for (i=0; i node = allli[i]; node.onmouseover =function( ) { this.className+=" 現在の"; } node.onmouseout=function() { this.className=this.className.replace(" 現在の", "") } } } window.onload=startList; //->

ie6 は div: hover の疑似クラスをサポートしません。 CSSを使用してaタグを制御します

#menu2 ul li.current ul{ display:block;} このスタイルと次の JS を追加しました startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("menu2") var allli = navRoot.getElementsByTagName ("li") for (i=0; i ノード = allli[i]; node.onmouseover=function() { this.className+=" current" } node.onmouseout=function() { this.className=this.className.replace(" current", ""); } } } window.onload=startList;

ie6 は div: hover の疑似クラスをサポートしていないので、その a タグを CSS で制御します。どこに追加すればよいのかわかりません。何度か試しましたがデバッグできませんでした。変更を手伝っていただけますか。