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

最新推荐文章于 2022-11-27 20:21:49 发布

sparrow_girl

最新推荐文章于 2022-11-27 20:21:49 发布

阅读量1.2k

点赞数

分类专栏： HTML+CSS JS 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_51053759/article/details/119959178

版权

本文介绍如何使用HTML、CSS和JavaScript技术创建一个具有压线效果的商品分类二级下拉菜单，重点在于处理元素层级和压线效果的细节。

摘要由CSDN通过智能技术生成

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

<!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