css中打开导航 |文字渐变css

/* 定义导航的基本样式 */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #000;
z-index: 99;
}
/* 定义导航中菜单的样式 */
nav ul {
list-style: none;
float: right;
margin-right: 20px;
}
nav ul li {
float: left;
margin-left: 20px;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
}
/* 定义点击导航按钮后出现的菜单 */
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
top: 60px;
left: 0;
width: 200px;
background: #000;
}
nav ul li:hover ul li {
float: none;
margin: 0;
}
nav ul li:hover ul li a {
padding: 10px;
border-bottom: 1px solid #666;
}

首先，大家需要定义导航的基本样式，包括固定在页面顶部、宽度为100%、高度为60px、背景为黑色、层级为99等样式。然后，大家定义导航中菜单的样式，包括无序列表、菜单项浮动、菜单项之间有20px的左边距、菜单项中链接有15px上下的内边距等样式。

接下来，大家定义点击导航按钮后出现的菜单。通过将子菜单的display属性设置为none，大家可以实现子菜单一开始不显示。当用户鼠标移动到包含子菜单的菜单项上时，大家将子菜单的display属性设置为block，并将其定位到父菜单下面。大家还需要定义子菜单的宽度为200px、背景为黑色、子菜单中的菜单项之间有1px的下边框、以及菜单项中链接有10px上下的内边距等样式。

最后，在HTML文件中添加导航菜单的代码，并为包含子菜单的菜单项添加:hover事件，使得当鼠标在该菜单项上悬停时，子菜单显示出来。