index_CSS5
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}
.wrapper{
width: 100%;
height: 100%
}
.navbar{
width: 100%;
height: 60px;
background: #9972bf;
}
.navbar > ul{
display: flex;
justify-content: center;
}
.navbar ul li{
position: relative;
}
.navbar ul li a{
display: block;
color: #fff;
height: 60px;
width: 180px;
text-align: center;
padding: 20px 10px;
letter-spacing: 2px;
text-transform: uppercase;
transition: all 0.2s ease;
}
.navbar ul > li a{
margin-right: 1px;
}
.navbar ul > li:last-child a{
margin-right: 0;
}
.navbar ul li a .icon {
width: 25px;
display: inline-block;
}
.navbar ul li a:hover,
.navbar ul li a.a_parent.active,
.navbar .dd_menu ul li a:hover,
.navbar .dd_menu ul li a.active{
background: #c279b7;
}
.navbar .dd_menu{
position: absolute;
top: 80px;
left: 0;
display: none;
}
.navbar .dd_menu ul li a{
width: 180px;
background: #9972bf;
text-align: left;
padding: 20px;
}
.navbar .dd_menu:before {
content: "";
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
border: 15px solid;
border-color: transparent transparent #9972bf transparent;
}
.navbar ul li a.a_parent.active + .dd_menu{
display: block;
}
.dd_submenu {
position: absolute;
top: 0;
left: 115%;
width: 100%;
display: none;
}
.dd_submenu:before {
content: "";
position: absolute;
top: 15px;
left: -30px;
z-index: 1;
border: 15px solid;
border-color: transparent #9972bf transparent transparent;
}
.navbar ul li a.dd_menu_a.active + .dd_submenu{
display: block;
}
index_CSS5
첫댓글 https://codepen.io/RajRajeshDn/pen/dyGZPMR