* {margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; user-select: none; font-style: normal; color: #000; font-family: 'Poppins', sans-serif;}
body {min-height: 90vh; background: #D7F1FA; display: flex; justify-content: center; align-items: center;}
.tab_menu {position: relative; width: 600px; height: 270px; background: #ddd; padding: 10px; scale: 2.4;}
.tab_menu > ul {display: flex; width: 382px; }
.tab_menu > ul > li {width: 300px; height: 30px; background: beige; margin-right: 5px;}
.tab_menu > ul > li > a {display: block; width: 120px; height: 30px; line-height: 30px; text-align: center; font-size: 10px;}
.tab_menu > ul > li > a:hover {color: #111;}
.tab_menu > ul > li.active > a {display: block; background: dodgerblue; height: 30px; line-height: 30px; color: #fff;}
.tab_menu > ul ul {display: none; position: absolute; left: 10px; top: 60px; width: 95%; display: flex; flex-direction: column;}
.tab_menu > ul ul > li {position: relative; line-height: 2.4;}
.tab_menu > ul ul > li::before {content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; background: #555; border-radius: 50%;}
.tab_menu > ul ul > li > em {display: inline-block; width: 474px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: left;}
.tab_menu > ul ul > li > em > a {margin-left: 9px; color: #444;}
.tab_menu > ul ul > li > span {display: inline-block; float: right;}
.tab_menu > ul ul > li > span > a {color: #444;}
.tab_menu > ul a.more {position: absolute; right: 10px; top: 10px; font-size: 1em; background: crimson; padding: 7px 20px; color: #fff;}
.tab_menu > ul a.more:hover {color: lightgoldenrodyellow;}