商品分类二级菜单（HTML+CSS+JS）_html5 二级分类

作者：你好赵伟 | 2024-06-07 15:47:21

踩

html5 二级分类

难点：压线效果的处理（元素的层级要分清）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul,li,p{
				padding: 0;
				margin: 0;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
				color: #545454;
			}
			/* 主菜单 */
			p{
				color: #545454;
				border: 1px solid #F3F3F3;
			}
			#menu{
				width: 200px;
				background-color: #f3f3f3;
				position: relative;
			}
			#menu p{
				line-height: 35px;
				text-indent: 20px;
			}
			#menu li.active p{
				border: 1px solid orange;
				border-right: 1px solid #fff;
				background-color: #fff;
				position: relative;
				z-index: 999;
			}
			/* 子菜单 */
			#submenu{
				width: 580px;
				height: 430px;
				border: 1px solid orange;
				position: absolute;
				left: 199px;
				top: 0;
				display: none;
			}
			#menu li.active #submenu{
				disp

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/686013