Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use ul li to realize four-layer cascading menu in css

2025-03-29 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report