Solution to pure css multi-level menu_html/css_WEB-ITnose

Use ul li to make an infinite drop-down menu

css writing #nav ul li ul{ display:none}
#nav ul li:hover ul{ display:bock}


In this case, hovering the mouse over the first-level menu will expand the second-level and all its sub-menus of levels 3, 4, 5, 6, 8, 9.
I have to write again #nav ul li:hover ul li ul{ display: none}

If there are dozens of levels, wouldn’t it be silly to write #nav ul li ul li ul ... li:hover ul li ul to prevent the lower levels from being displayed when the mouse is hovering? ? ? ?

How do experts solve this problem?

Reply to the discussion (solution)

js to solve the problem. Pure css has compatibility issues. After all, hover only has a in all browsers. Supported under the server

http://bbs.csdn.net/topics/390686370

http://jingyan.baidu.com/article/9f63fb91f5e897c8400f0e06.html Multi-level CSS
http://www.wzsky.net/html/Website/CSS/113149.html

#nav li ul{ display:none}
#nav li:hover>ul{ display:bock}

#nav li ul{ display:none}
#nav li:hover>ul{ display:bock}


Master, one > can solve the problem.