Example 2. With added styles. Pure CSS. Without JS. Dropdown menu/content opens and closes on click. Several ways to close (by the same button, by another button, by clicking outside the menu area, by an icon inside the menu). Additionally added submenu by :hover.
jsfiddle linkjsfiddle link
body {
margin: 0;
font-size: 20px;
font-family: Times, "Times New Roman", serif;
}
/* dd container */
.dropdown {
display: inline-block;
position: relative;
outline: none;
background-color: #861cb9;
margin: 10px 5px;
}
/* button */
.dropbtn {
display: inline-block;
padding: 12px 16px;
color: white;
cursor: pointer;
background-color: #861cb9;
transition: 0.35s ease-out;
}
.dropbtn:hover, .dropbtn.c:hover, .dropbtn.r:hover {
background-color: #691692;
}
/* dd content */
.dropdown .dropdown-content {
position: absolute;
top: 50%;
visibility: hidden;
opacity: 0;
z-index: 100000;
background-color: #f7f7f7;
min-width: 120%;
padding: 10px;
font-size: 16px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
transition: 0.35s ease-out;
}
/* center & right position menu relative to the button */
.dropdown .dropdown-content.c {
left: 50%;
margin-left: calc(-60% - 10px);
}
.dropdown .dropdown-content.r {
right: 0;
}
/* style link menu item */
.dropdown-content .mi {
display: block;
color: black;
padding: 8px 0;
text-decoration: none;
position: relative;
}
.dropdown-content .mi::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
linear-gradient(
90deg,
rgba(240, 242, 244, 0) 0%,
rgba(223, 223, 223, 1) 30%,
rgba(240, 242, 244, 0) 100%
);
opacity: 0;
z-index: -1;
transition: 0.4s ease-out;
}
.dropdown-content .mi:hover::before {
opacity: 1;
}
/* style text link */
.dropdown-content .tl {
color: #36f;
text-decoration: none;
border-bottom: 1px dotted #36f;
transition: 0.35s ease-out;
}
.dropdown-content .tl:hover {
border-bottom: 1px dotted transparent;
}
/* show dd content */
.dropdown:focus .dropdown-content {
outline: none;
visibility: visible;
opacity: 1;
transform: translateY(20px);
}
/* mask to close menu by clicking on the button */
.dropdown .db2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
z-index: 10;
display: none;
}
.dropdown:focus .db2 {
display: inline-block;
}
.dropdown .db2:focus .dropdown-content, .dropdown-content .db3:focus .dropdown-content {
outline: none;
visibility: hidden;
opacity: 0;
}
/* button gradient */
.dropbtn::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: radial-gradient(circle at 0 0, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
background-repeat: no-repeat;
background-color: #861cb9;
transition: 0.35s ease-out;
}
/* class 'c' center gradient backlight */
.dropbtn.c::before {
background: radial-gradient(circle at 50% -1px, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
background-repeat: no-repeat;
background-color: #861cb9;
}
/* class 'r' right gradient backlight */
.dropbtn.r::before {
background: radial-gradient(circle at 100% 0, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
background-repeat: no-repeat;
background-color: #861cb9;
}
/* show gradient backlight */
.dropdown:focus .dropbtn::before, .dropdown:focus .dropbtn.c::before, .dropdown:focus .dropbtn.r::before {
background-color: #691692;
}
.dropdown:focus, .dropdown:focus .dropbtn {
z-index: 1;
}
.dropdown:focus .dropbtn {
background: none;
}
/* icon hamburger */
.dropbtn::after {
content: "";
display: inline-block;
width: 15px;
height: 3px;
margin-left: 10px;
border-top: 2px solid #fff;
border-bottom: 7px double #fff;
}
.dropdown:focus .dropbtn::after {
height: 0;
border-bottom: 0;
margin-bottom: 4px;
}
/* icon content */
.dropbtn.i2::after {
content: "";
display: inline-block;
border: 0;
width: 15px;
height: 12px;
margin-left: 10px;
background:
linear-gradient(to right, #fff, #fff) 0px 0px/11px 2px, /* left top / width height */
linear-gradient(to right, #fff, #fff) 0px 5px/15px 2px,
linear-gradient(to right, #fff, #fff) 0px 10px/8px 2px;
background-repeat: no-repeat;
}
.dropdown:focus .dropbtn.i2::after {
width: 15px;
height: 12px;
background: linear-gradient(to right, #fff, #fff) 0px 10px/15px 2px;
background-repeat: no-repeat;
}
/* icon x */
.dropdown-content .db3 {
display: inline-block;
position: absolute;
top: 5px;
right: 5px;
width: 18px;
height: 18px;
padding: 0;
border-radius: 100%;
z-index: 10;
transition: 0.15s ease-out;
}
.dropdown-content .db3::before, .dropdown-content .db3::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 60%; /* height icon */
width: 2px; /* width icon */
background: #3c4043; /* color icon */
}
.dropdown-content .db3::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.dropdown-content .db3::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.dropdown-content .db3:hover {
background: #d1d1d6;
}
/* sub menu container */
.sub-dropdown {
position: relative;
}
.sub-dropdown-content {
position: absolute;
visibility: hidden;
opacity: 0;
background-color: #f7f7f7;
left: 100%;
top: -10px;
padding: 10px 5px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
transition: 0.35s ease-out;
}
.sub-dropdown-content a {
color: black;
padding: 5px 12px;
text-decoration: none;
display: block;
position: relative;
white-space: nowrap;
}
/* sub menu item */
.si {
cursor: default;
}
.si::after {
content: "\25B8";
margin-left: 5px;
vertical-align: -1px;
margin-right: 10px;
float: right;
}
.sub-dropdown:hover .sub-dropdown-content {
visibility: visible;
opacity: 1;
transform: translateY(10px);
}
.sub-dropdown-content a::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
linear-gradient(
90deg,
rgba(240, 242, 244, 0) 0%,
rgba(223, 223, 223, 1) 50%,
rgba(240, 242, 244, 0) 100%
);
opacity: 0;
z-index: -1;
transition: 0.4s ease-out;
}
.sub-dropdown-content a:hover::before {
opacity: 1;
}
/* media queries */
@media (max-width:560px) {
.dropdown .dropdown-content.r,
.dropdown .dropdown-content.c {
left: 0;
margin-left: 0;
}
.dropbtn.c::before, .dropbtn.r::before {
background: radial-gradient(circle at 0 0, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
}
}<div class="dropdown" tabindex="1">
<i class="db2" tabindex="1"></i><a class="dropbtn i2">Dropdown l</a>
<div class="dropdown-content"><i class="db3" tabindex="1"></i>
<p>Dropdown content. Left-aligned relative to the button. Text <a href="#" class="tl">link</a> ....</p>
</div>
</div>
<div class="dropdown" tabindex="1">
<i class="db2" tabindex="1"></i><a class="dropbtn c">MyMenu c</a>
<div class="dropdown-content c"><i class="db3" tabindex="1"></i>
<a href="#" class="mi">Products</a>
<div class="sub-dropdown">
<a class="mi si">Company</a>
<div class="sub-dropdown-content">
<a href="#">Sublink 1</a>
<a href="#">Sublink 2</a>
</div>
</div>
<a href="#" class="mi">Stackoverflow</a>
</div>
</div>
<div class="dropdown" tabindex="1">
<i class="db2" tabindex="1"></i><a class="dropbtn r i2">Dropdown r</a>
<div class="dropdown-content r"><i class="db3" tabindex="1"></i>
<p>Dropdown content. Right-aligned relative to the button. Text <a href="#" class="tl">link</a> ....</p>
</div>
</div>