How to use ul li ul li ul li in css to implement a three-level 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

At present, when the second-level menu is displayed, the third-level menu is also displayed. I don’t know what went wrong. Please Expert guidance, thank you in advance...

The file has been uploaded to: http://www.zjgqy.com.cn/t4.html

Reply to the discussion (solution)

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

Add this, otherwise the third level ul will be displayed when the second episode menu is displayed

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

Add this, otherwise the second episode When the menu is displayed, the third level ul will be displayed together


Thanks to Dizzy88 for the reply, this problem is solved, but there is still a problem under IE6, I don’t know what to do! Could you please help me take another look?

#menu2 ul li.current ul{
display:block;}
Added this style, and the following JS
d455dbefdfd27fa8a901c0cb46b2e52397ba5db869895fd384d3fdfe19f1ad067834e3e82592b38f9636b240c360d212< ;!]]>
2cacc6d41bbb37262a98f745aa00fbf0

This IE6 does not support that sentence, it only supports the pseudo-class of a! Does this require changing JS?

This must be a problem with the JS code. One sentence is right. IE6 does not support pseudo classes, so the sentence you added later to hide the three-level list is also invalid. You should give it in JS. Plus no display!

Because the third-level menu is not hidden when the mouse moves to the second-level menu
As long as the e40f8ad3247d1dc8c1105d16459982ee#div1 ul li:hover ul li ul{display:none}< ;/style> That’s it

Pay attention to change the previous ID to your own id

#menu2 ul li.current ul{
display:block;}
Add With this style, there is also the following JS
4ec11beb6c39d0703d1751d203c17053cc63995391ba4e0281bb57f6051e6a2197ba5db869895fd384d3fdfe19f1ad065fd16b97402fb2403690b855b65141efd4f950acbe0c0c75a3f5afe0a0b2ef20
2cacc6d41bbb37262a98f745aa00fbf0

ie6 does not support divs Pseudo class: For hover, just add an a tag to your li and then use css to control the a tag

#menu2 ul li.current ul{
display:block;}
Added this style, and the following JS
d455dbefdfd27fa8a901c0cb46b2e52397ba5db869895fd384d3fdfe19f1ad067834e3e82592b38f9636b240c360d212< ;!]]>
2cacc6d41bbb37262a98f745aa00fbf0

IE6 does not support the pseudo-class of div: hover. Just add an a tag to your li and then control the a tag with css



I don’t know where to add it. I tried several times but failed to debug it. Could you please help me change it?