<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中direction属性的作用及用法，包括ltr、rtl和inherit三个取值的意义，并解释了这些选项如何影响文本的流向。此外还提到了unicode-bidi属性的应用场景。
扫一扫
2043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
