css下拉二级菜单,css禁止右击

css取余数，css如果li隐藏，css3边框光晕，css滑动距离放大缩小，css设置插入图片大小，div css 三角区，css禁止右击

.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 12px 20px;
}
.nav-menu1 {
position: relative;
}
.nav-menu2 {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
background-color: #fff;
}
.nav-menu1:hover .nav-menu2 {
display: block;
}
.nav-link {
color: #666;
padding: 6px 10px;
text-decoration: none;
}
.nav-link:hover {
background-color: #eee;
}

大家需要给导航栏的容器添加display:flex;属性，这样它的子元素可以横向排列。然后，大家给下拉菜单的父级元素添加position:relative;属性，使得下拉菜单可以相对它的父级元素定位。接着，大家为下拉菜单添加display:none;和position:absolute;属性，使得它一开始不显示在页面上，并且可以相对于父级元素定位。大家为鼠标划过下拉菜单的父级元素时，给下拉菜单添加display:block;属性，使得它可以显示在页面上。最后，大家样式化链接和鼠标滑过样式，这样下拉菜单就完成了。