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;}
1
2
3
4
5
6
7
8
9
10
11
12

二、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.neta>li>
		            <li><a href="#">htmla>li>
					<li><a href="#">CSSa>li>
		            <li>
		                <a href="#" class="arrow-right">javascripta>
		                <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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