JSFiddle - React, Tailwind, and code Playground

by gena

HTML

<ul id="topnav">
  <li>
		<a href="#1">Меню 1</a>
		<span class="cl-effect-1">
			<a href="#1">A</a> 
      <a href="#2">B</a> 
      </span>
      <span id="def" style="display: inline">
			  <a href="#1">A</a> 
        <a href="#2">B</a> 
      </span>
  </li>
  <li>
		<a href="#3">Меню 2</a>
		<span class="cl-effect-1">
			<a href="#3">C</a> 
      <a href="#4">D</a> 
      </span>
  </li>
</ul>

CSS

#topnav {
        margin: 0;
        padding: 0;
	list-style: none;
        list-style-type: none;
        border-radius: 20px 5px;
        text-align: left;
      }
      #topnav li { display: inline; }
      #topnav li a {
        font-size: 11.5pt;

        padding: 5px 10px;
        text-decoration: none;
        display: inline-block;
      }
      #topnav li a:hover {
        border-radius: 20px 5px;
        background-color: #0066FF;
      }
      #topnav li span {
//	 text-align: center;
	float: left;
	padding: 10px 0;
	position: absolute;
	left: 0; top:35px;
	display: none; /*--Скрывать по умолчанию--*/
	width: 100%;
//	background: #1376c9;
	color: #000;
	/*--Нижнее правое закругление--*/
	-moz-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	/*--Нижнее левое закругление--*/
	-moz-border-radius-bottomleft: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
      }
	#topnav li:hover span { 
		color: #000;
		display: block; 
		border-radius: 0px 0px;
	} /*--Показывать подменю при наведении--*/
	#topnav li span a { 
		color: #000;
		display: inline; 
		border-radius: 0px 0px;
	}
	#topnav li span a:hover {
//		color: #000;
		text-decoration: underline;	
		        border-radius: 0px 0px;
			background-color: transparent;
	}
	
	/* Эффект 1: Скобки */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-effect-1 a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.cl-effect-1...