css self-study framework secondary drop-down menu

The drop-down menu is the most common and commonly used in our development. Today we will learn the second-level drop-down menu by ourselves. First take a look at the final effect:

1. css code

.arrow-down::before {
    
    content: ""; width: 10px;height: 10px;border: solid ;border-width: 2px 2px 0 0;border-color: var(--white);transform: translate(-50%, -50%) rotate(135deg);position: absolute;right: 0px;top:50%;}
		.arrow-right::before {
    
    content: ""; width: 10px;height: 10px;border: solid ;border-width: 2px 2px 0 0;border-color: var(--white);transform: translate(-50%, -50%) rotate(45deg);position: absolute;right: 0px;top:50%;}
		.myth-menu{
    
    list-style: none;padding: 0; margin: 0;height: 30px;background-color:#000000;width: 100%;}		
		.myth-menu > li{
    
    position: relative;float: left;height: 30px;border-bottom-width:1px;border-bottom:solid;height: 30px;padding: 0 20px;}
		.myth-menu li:hover {
    
     background: #CCCCCC; }		
		.myth-menu li:hover > ul{
    
    display: inline;}
		.myth-menu a {
    
    color: var(--white);text-decoration: none;padding: 0 0 0 10px;display: block;line-height: 30px;}
		.myth-menu a:hover {
    
     color:val(--black); }		
		.myth-menu-second{
    
    position: absolute;top: 30px;left: 0;width: 150px;list-style: none;padding: 0;margin: 0;display: none;}		
		.myth-menu-second > li{
    
    position: relative;height: 30px;background: #999999;}		
		.myth-menu-third {
    
    position: absolute;top: 0px;right: -150px;width: 150px;list-style: none;padding: 0;margin: 0;display: none;}		
		.myth-menu-third > li{
    
    height: 30px;background: #999999;}

2. html code

 <ul class="myth-menu">
		    <li><a href="#">我们</a></li>
		    <li><a href="#">服务</a></li>
		    <li>
		        <a href="#" class="arrow-down">工作</a>
		        <ul class="myth-menu-second">
		            <li><a href="#">asp.net</a></li>
		            <li><a href="#">html</a></li>
					<li><a href="#">CSS</a></li>
		            <li>
		                <a href="#" class="arrow-right">javascript</a>
		                <ul class="myth-menu-third">
		                    <li><a href="#">第一天</a></li>
		                    <li><a href="#">第二天</a></li>
		                    <li><a href="#">第三天</a></li>
		                    <li><a href="#">第四天</a></li>
		                </ul>
		            </li>
		           
		        </ul>
		    </li>
		    <li><a href="#">联系</a></li>
		</ul>

In this way, our secondary drop-down menu is implemented.