JSFiddle - React, Tailwind, and code Playground

by Tim

HTML

<ul class="navigation">
  <li><a href="#">請選擇</a>
  <ul style="width: 200px; height: 100px; overflow-x:hidden;overflow-y:auto">
    <li><a href="#">第一層大類A</a>
    <ul>
        <li><a href="#">第二層小類1</a></li>
        <li><a href="#">第二層小類2</a></li>
        <li><a href="#">第二層小類3</a></li>
        <li><a href="#">第二層小類4</a></li>
    </ul>
    </li>
    <li><a href="#">第一層大類B</a><li>
    <li><a href="#">第一層大類C</a><li>
    <li><a href="#">第一層大類D</a><li>
    <li><a href="#">第一層大類E</a><li>
    <li><a href="#">第一層大類F</a><li>
    <li><a href="#">第一層大類G</a><li>
    <li><a href="#">第一層大類B1</a><li>
    <li><a href="#">第一層大類C2</a><li>
    <li><a href="#">第一層大類D3</a><li>
    <li><a href="#">第一層大類B4</a><li>
    <li><a href="#">第一層大類C5</a><li>
    <li><a href="#">第一層大類D6</a><li>
  </ul>
  </li>
</ul>

CSS

body, ul.navigation, ul.navigation li, ul.navigation ul, a{
    margin: 0;
    padding: 0;
    font-size: 12px;
    text-decoration: none;
}
ul.navigation,ul.navigation li {
    list-style: none;
}

ul.navigation li {
    position: relative;
    float: left;
}

ul.navigation li a
{
    width: 200px;
    display: block;
    padding: 1px 2px;
    background: #fff;
    color: black;
    z-index:1;
}

ul.navigation > li > a{
    border-bottom: 1px solid #CCC;    
    border-left: 1px solid #CCC;
}
ul.navigation > li > a:hover{
    color: #666;
    background: #DDD
}

ul.navigation li ul{
    display: none;
    float: left;
    position: absolute;
    left: 0;    
    margin: 0;
    z-index:2;
}
/* 當第一層選單被觸發時，指定第二層顯示 */
ul.navigation li:hover > ul{
    display: block;
}

ul.navigation ul li {
    border-bottom: none;
}

ul.navigation ul li:last-child {
    border-bottom: none;
}

ul.navigation ul a {
    width: 200px;
    padding: 1px 2px;    
    color: #666;        
    background: #EEE;
    z-index:3;
}
ul.navigation ul a:hover {        
    background: #CCC;    
}

ul.navigation ul li:hover > ul{
    display: block;
    position: absolute;
    top: 0;    
    left: 100%;
}

.arrow-bottom {
    display: inline-block;
    margin-left: 5px;
    border-top: 4px solid #FFF;
    border-right: 4px solid transparent;    
    border-left: 4px solid transparent;        
    width: 1px;
    height: 1px;
}

.arrow-right {
    display: inline-block;
    margin-left: 12px;    
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 3px solid #666;        
    width: 1px;
    height: 1px;
}

JavaScript

$(function() {
            $("ul.navigation > li:has(ul) > a").append('<div class="arrow-bottom"></div>');
            $("ul.navigation > li ul li:has(ul) > a").append('<div class="arrow-right"></div>');
        });