css下拉菜单显示与不显示

CSS下拉菜单是网页中常见的界面元素之一，通过CSS样式的控制，可以实现点击或悬停触发下拉展示菜单的效果。

/* CSS样式代码 */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none; /* 初始状态下菜单不显示 */
  position: absolute;
  z-index: 1;
}
.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content {
  display: block; /* 鼠标悬停或点击时展示菜单 */
} 

以上样式代码实现了一个简单的下拉菜单，其中.dropdown为菜单项的父元素，.dropdown-content为下拉的菜单区域，通过position定位到父元素下的绝对位置。

需要注意的地方是，.dropdown-content初始状态下display为none，即菜单不显示，而通过:hover或:focus事件触发后，将display属性改为block，即展示出下拉菜单。

在实际应用中，可以根据需要对下拉菜单的样式进行调整，如增加动画效果、更改菜单宽度等。同时，使用JavaScript等脚本语言可以实现更复杂的下拉菜单逻辑，如多级菜单、动态展示等。