css自学框架之二级下拉菜单

下拉菜单是我们开发中最常见，最常用的，今天我们就自学二级下来菜单。首先看一下最终效果：

一、css代码

.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;}

二、html代码

 <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>

这样我们的二级下来菜单就实现了。