发布时间:2025-12-10 13:05:39 浏览次数:10
CSS菜单(CSS Menu)是一种通过样式表来定义的网页导航菜单,通常用于网站的横向或竖向导航。下面介绍一些常见的CSS菜单样式。
/* 横向导航 */ul {list-style: none; /* 去除默认的列表样式 */padding: 0;margin: 0;}li {display: inline-block;}a {display: block;padding: 10px;color: #fff;background: #333;text-decoration: none;}a:hover {background: #666;}/* 竖向导航 */ul {list-style: none; /* 去除默认的列表样式 */padding: 0;margin: 0;}li {width: 200px;}a {display: block;padding: 10px;color: #fff;background: #333;text-decoration: none;}a:hover {background: #666;}/* 下拉菜单 */ul {list-style: none; /* 去除默认的列表样式 */padding: 0;margin: 0;position: relative; /* 父元素设置为相对定位 */}li {display: inline-block;}a {display: block;padding: 10px;color: #fff;background: #333;text-decoration: none;}a:hover {background: #666;}ul ul {display: none; /* 隐藏子菜单 */position: absolute; /* 绝对定位 */top: 100%; /* 垂直偏移量 */left: 0;}li:hover >ul {display: block; /* 鼠标悬停时显示子菜单 */}/* 面包屑导航 */ul {list-style: none; /* 去除默认的列表样式 */padding: 0;margin: 0;}li {display: inline-block;margin: 0 5px;}a {display: block;padding: 5px 10px;color: #333;background: #ddd;text-decoration: none;border-radius: 5px;}a:hover {background: #999;}