CSS

drop down menu html css

  <form class="dropdown">
        <label for="dropdown-menu">Please choose an option..</label>
        <input list="dropdown-menu"/>
            <datalist id="dropdown-menu" id="dropdown-menu">
                <option value="option 1"></option>
                <option value="option 2"></option>            
                <option value="option 3"></option>
                <option value="option 4"></option>
            </datalist>
    </form>

Drop down css

/* LINK TRANSITION */
a {
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}
/* MENU STYLE */

header {
	width:100%;
}

header #top {
	background:#222;
	float:left;
	height:30px;
	line-height:30px;
	width:100%;
}

header nav#topmenu {
	margin:0 auto;
	padding:0 15px;
	position:relative;
	width:960px;
}

header nav#topmenu ul {
	margin:0
	padding:0;
}

header nav#topmenu ul li {
	float:left;
	position:relative;
	font-size:10px;
	list-style:none;
	margin:0;
	padding:0;
	width:90px;
	text-align:center;
	text-transform:uppercase;
	border-right:1px solid #ccc;	
}

header nav#topmenu ul li:first-child {
	border-left:1px solid #ccc;
}

header nav#topmenu ul li a {
	color:rgba(255,255,255,0.6);
	text-decoration:none;
	display:block;
}

header nav#topmenu ul li a:hover {
	color:#fff;
}

header nav#topmenu ul li:hover > a { /* ACTIVATE LINK WHEN THE MOUSE OVER SUB-MENU */
	color:#fff;
}

header nav#topmenu ul li span { 
	background:url(arrow.png) center no-repeat;
	height:10px;
	position:absolute;
	text-indent:-9999px;
	top:10px;
	right:5px;
	width:10px;
}

header nav#topmenu ul li span.arrow {
	background-position:0 2px;
}

header nav#topmenu ul li span.arrow-right {
	background-position:-10px 2px;
}

header nav#topmenu ul li ul.sublist { /* FIRST SUB-MENU STYLE */
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	left:0px;
	top:31px;
	background:#222;
	width:90px;
	opacity:0;
	visibility:hidden; /* Avoids being selected even if the opacity is set to 0 */
        
        /* CSS3 Multiple Transitions */

	-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; 
	-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}

header nav#topmenu ul li ul.sublist li {
	border:none;
	border-bottom:1px solid #ccc;
	clear:both;
	margin-top:-15px;
	padding:0;
	width:90px;
	-moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

header nav#topmenu ul li ul.sublist li a {
	color:rgba(255,255,255,0);
}

header nav#topmenu ul li:hover ul.sublist {
	opacity:1;
	visibility:visible;
}

header nav#topmenu ul li:hover ul.sublist li {
	margin-top:0;
	opacity:1;
}

header nav#topmenu ul li:hover ul.sublist li a {
	color:rgba(255,255,255,0.6);	
	-moz-transition:color 0.1s ease-out;
	-webkit-transition:color 0.1s ease-out;
	-o-transition:color 0.1s ease-out;
	transition:color 0.1s ease-out;
}

header nav#topmenu ul li:hover ul.sublist li a:hover {
	color:rgba(255,255,255,1);	
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}

header nav#topmenu ul li:hover ul.sublist li:hover > a { 
        /* ACTIVATE LINK SUB-MENU WHEN THE MOUSE OVER SUBSUB-MENU */
	color:#fff;
}

/* SUB-MENU SUB STYLE */
header nav#topmenu ul li ul.sublist li ul.subsublist {
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	left:61px;
	top:0px;
	background:#222;
	width:90px;
	opacity:0;
	visibility:hidden;
	-moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	-webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	-o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
}

header nav#topmenu ul li ul.sublist li ul.subsublist li{
	border:none;
	border-bottom:1px solid #ccc;
	clear:both;
	margin:0;
	padding:0;
	width:90px;
	opacity:1;
}

header nav#topmenu ul li ul.sublist li:hover ul.subsublist {
	opacity:1;
	left:91px;
	visibility:visible;
}

Css Drop Down

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>