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

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

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