CSS で ul li ul li ul li を使用して 3 レベルの menu_html/css_WEB-ITnose を実装する方法

css

b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
ebeda52af7641f7e715679a8472f8c69
b2386ffb911b14667cb8f0f91ea547a7多级菜单6e916e0f7d1e588d4f442bf645aedb2f
46d5fe1c7617e3914f214aaf043f4ccf
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;
}



531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

b0211f444726bcf1ead5e8918bda92f3
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812网站首页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812域名主机5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812域名注册5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812企业邮局5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812网站建设5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812企业网站5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812其它网站5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812行业网站5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812论坛程序5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812商城程序5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812联系我们5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
現状では、第 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 を追加しました
4ec11beb6c39d0703d1751d203c17053151df87bd8f0ae54b60cc7503ddafc87b499fc97256e641c7e523ecec8265a77ecd1813a6aa59b1d5c6c9d29cdb85c94
2cacc6d41bbb37262a98f745aa00fbf0
この ie6 はその文をサポートしていません。a の疑似クラスのみをサポートしています。これにはJSを変更する必要がありますか?

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

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

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

以前の ID を自分の ID に変更してください

#menu2 ul li.current ul{

display:block;}

このスタイルと次の JS を追加します
937693bdbed7e57d9a35083730fb3639cc63995391ba4e0281bb57f6051e6a2197ba5db869895fd384d3fdfe19f1ad06a48f620bb2638a4e354f24de52aa9f70d4f950acbe0c0c75a3f5afe0a0b2ef20

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

#menu2 ul li.current ul{
display:block;}
このスタイルと次の JS を追加しました
4ec11beb6c39d0703d1751d203c17053151df87bd8f0ae54b60cc7503ddafc87b499fc97256e641c7e523ecec8265a77ecd1813a6aa59b1d5c6c9d29cdb85c94
2cacc6d41bbb37262a98f745aa00fbf0

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