css点击菜单栏显示内容 |css 颜色变化

.menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.menu li {
margin: 0 10px;
}
.menu li a {
color: #333;
text-decoration: none;
cursor: pointer;
}
.menu li a:hover {
color: #0d6efd;
}
.submenu {
display: none;
}
.menu li:hover .submenu {
display: block;
position: absolute;
top: 40px;
left: 0;
}

上面的代码中，大家首先定义了一个菜单栏，这个菜单栏具有flex布局，每个菜单项之间有10像素的距离。每个菜单项都是一个链接，鼠标悬停时链接的颜色会变成蓝色。而子菜单则是隐藏的，只有在鼠标悬停在菜单项上时才会显示出来。位置是绝对定位，距离父级菜单项40像素，左对齐。

通过这段代码，大家可以轻松实现一个简单的点击菜单栏显示内容的效果，并且可以根据需要进行修改和扩展。当然，为了实现更复杂的效果，还需要理解CSS的其他特性和技巧。