How to use ul li to realize four-layer cascading menu in css
This article mainly shows you the "css how to use ul li to achieve four-tier cascading menu", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use ul li to achieve four-tier cascading menu in css" this article.
The code is as follows:
The default color of a {color:Black; / *-- a tag is black-- * / text-decoration:none; / *-- hide the underline of the hyperlink-- * /} a:hover {/ * *-the text appears red when the mouse focuses on the a tag-- * / color:Red;} # div1 ul {/ *-- remove the dot in front of the text-- * / list-style-type:none } # div1 ul li {border-style:solid; border-width:1px; padding:6px; width:2.2cm; text-align:center; background-color:#eeeeee;} # div1 ul li ul {display:none; / *-- hides menus other than level 1 menus by default-- * /} # div1 ul li:hover ul {display:block; position:relative; left:50px; height:0px; top:-25px } # div1 ul li:hover ul li ul / *-when the mouse focuses on the li under the primary menu, hides the tertiary menu-- * / {display:none;} # div1 ul li ul li:hover ul / *-- when the mouse focuses on the li under the secondary menu, displays the tertiary menu and sets the menu to be displayed in block style-- * / {display:block } # div1 ul li ul li:hover ul li ul / *-when the mouse focuses on the li under the secondary menu, hides the four-level menu-- * / {display:none;} # div1 ul li ul li ul li:hover ul / *-- when the mouse focuses on the li under the three-level menu, displays the four-level menu and sets the menu to be displayed in the block style-- * / {display:block } function config () {if (confirm ("are you sure you want to contact us?") {/ / _ window.location.href = 'http://www.baidu.com'; / / location.href = "http://www.baidu.com"; / / window.open (' http://www.baidu.com'); if (confirm (" can you contact us? ") = = true) {return;} else {window.open ("http://www.baidu.com");}} else {return) }} China Hunan Changsha Furong District Tianxin District Yuhua County Kaifu District Hengyang Yanfeng District Zhu Hui District Shigu County Qidong County Nan Yue District Yongzhou Lengshui Beach District Dongan County Xiaoxiang District Beijing Chaoyang District Guangdong Guangzhou Tianhe District Yuexiu District Shenzhen Luohu District Futian District Nanshan District, Yantian District, Baoan District, Longgang District, Dongguan, Foshan, USA, Manhattan, New York, Queens, Washington, Chicago, St. Petersburg, Moscow, Russia.
