css导航菜单怎么设计 |动态加载css后页面会闪屏

/* 水平导航菜单 */
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
}
nav ul li a {
text-decoration: none;
color: #333;
font-size: 16px;
}

以上代码实现了水平导航菜单的基本功能，通过设置父元素的display为flex，子元素之间的间距可以通过gap属性来调整。

/* 垂直导航菜单 */
nav {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
font-size: 16px;
}

以上代码实现了垂直导航菜单的基本功能，通过设置父元素的flex-direction为column，子元素变为纵向排列，在li元素上加display:block使其变为块级元素，方便设置padding。

/* 下拉菜单 */
nav li {
position: relative;
}
nav ul ul {
position: absolute;
top: 100%;
left: 0;
display: none;
}
nav li:hover >ul {
display: block;
}

以上代码实现了下拉菜单的基本功能，通过将子菜单的position设置为absolute，让其可以相对于父菜单进行定位。当鼠标悬停在父菜单上时，通过设置:hover事件可以让子菜单显示。

总之，通过合理的CSS设计，可以轻松实现各种风格和效果的导航菜单，让用户更加便捷地浏览网页内容。