<div class="nav">
<ul>
<li class="menu">首页
<ul class="subMenu">
<li><a href="https://www.csgo.com.cn/main.
html">游戏官网</a></li>
<li><a href="https://www.pwesports.cn/association">高校电竞社</a></li>
<li><a href="https://csgo.wanmei.com/communityserver">社区中心</a></li>
</ul>
</li>
<li class="menu"><a href="#">充值</a></li>
<li class="menu">新闻
<ul class="subMenu">
<li><a href="https://www.csgo.com.cn/activity/index.
html">活动中心</a></li>
<li><a href="https://www.csgo.com.cn/match">赛事中心</a></li>
<li><a href="https://www.csgo.com.cn/news/index.
html">新闻中心</a></li>
</ul>
</li>
<li class="menu"><a href="#">赛事</a></li>
<li class="menu">资料
<ul class="subMenu">
<li><a href="https://www.csgo.com.cn/hd/1704/newerguide/index.
html">新手指南</a></li>
<li><a href="https://www.csgo.com.cn/hd/1610/info/index.
html">官方资料站</a></li>
<li><a href="https://www.csgo.com.cn/show">游戏特色</a></li>
</ul>
</li>
<li class="menu"><a href="//wmsjdj.tmall.com/category-1465876517.htm">商城</a></li>
<li class="menu">服务
<ul class="subMenu">
<li><a href="https://www.csgo.com.cn/faq/index.
html">常见问题</a></li>
<li><a href="javascript:void(0);">客服支持</a></li>
<li><a href="#">礼包码兑换</a></li>
</ul>
</li>
<li class="menu">注册
<ul class="subMenu">
<li><a href="#">游戏下载</a></li>
<li><a href="#">账户注册</a></li>
</ul>
</li>
</ul>
</div> /* 导航栏
样式 */
/* 基础
样式 */
.nav {
width: 100%;
height: 55px;
background-color: #3498db; /* 灰蓝色背景 */
height: 50px;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex; /* 横向布局 */
justify-content: flex-start; /* 菜单项 */
}
.nav li.menu {
position: relative; /* 设置相对定位以便子菜单定位 */
padding: 15px 40px; /* 菜单项内边距 */
cursor: pointer;
text-align: center; /* 文本居中 */
color: white; /*
默认字体颜色为白色 */
}
.nav li.menu:hover {
background-color: white; /* 鼠标悬停时背景
变为白色 */
color: black; /* 鼠标悬停时字体颜色
变为灰蓝色 */
}
.nav li.menu a {
text-decoration: none; /* 去掉
链接下划线 */
color: white; /*
链接默认颜色为白色 */
}
.nav li.menu a:hover {
color: #3498db; /*
链接悬停时颜色
变为灰蓝色 */
}
/* 二级菜单
样式 */
.subMenu {
display: none; /*
默认隐藏二级菜单 */
position: absolute; /* 绝对定位以确保在父菜单下方显示 */
top: 100%; /* 在父菜单正下方显示 */
left: 0;
background-color: #3498db; /* 灰蓝色背景 */
width: 110px; /* 二级菜单宽度 */
z-index: 1000; /* 确保二级菜单在其他内容之上 */
}
.subMenu li {
padding: 10px; /* 二级菜单项内边距 */
color: white; /*
默认字体颜色为白色 */
text-align: left; /* 二级菜单文本左对齐 */
}
.subMenu li:hover {
background-color: orange; /* 鼠标悬停时背景
变为白色 */
color: #3498db; /* 鼠标悬停时字体颜色
变为灰蓝色 */
}
/* 鼠标悬停时显示二级菜单 */
.menu:hover .subMenu {
display: block; /* 显示二级菜单 */
} 没有实现打开网页二级菜单
默认隐藏，修改代码给出实现二级菜单
默认隐藏只有鼠标悬停才显示二级菜单，给出
HTML,CSS,JS文件
本文介绍了一种常见需求的解决方案：如何通过CSS代码让网页中的a链接在被点击时保持原有颜色，避免颜色变化，适用于希望保持页面一致性的前端开发者。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
