核心提示：首先我们定义一个button按钮和一个菜单列表，我们把他们封装到一个块级元素中，并指定position属性，其次我们对button定义一个选择器，来设置其样式：html head/head bodyp...
首先我们定义一个button按钮和一个菜单列表，我们把他们封装到一个块级元素中，并指定position属性，其次我们对button定义一个选择器，来设置其样式：
<html>
<head></head>
<body>
<p style="position: relative;">
<button class="button-menu" (click)="showButtonList()" (blur)="hiddenList()">button</button>
<ul *ngif="_showbuttonlist">
<li><a href="">aaa</a> </li>
<li><a href="">bbb</a> </li>
<li><a href="">ccc</a> </li>
</ul>
</p>
</body>
</html>
在button里面我们添加click事件和失去焦点事件，让控制菜单的show和隐藏
然后我们定义监听事件要做的事情：
showButtonList(){
this._showbuttonlist = this._showbuttonlist?false:true;
}
hiddenList(){
this._showbuttonlist = false;
}
最后我们只要设置一下样式就可以：
第一我们设置一下按钮的属性
.button-menu {
width: 100px;
height: 36px;
background-color: white;
color: red;
border-radius: 4px;
border: 1px solid blue;
position: absolute;
}
第二我们设置一下列表的按钮属性
.button-menu + ul li {
width: 100px;
height: 36px;
background-color: white;
color: red;
border-radius: 4px;
border: 1px solid blue;
z-index: 1000;
list-style: none;
}
第三我们设置一下列表的属性
.list-menu {
margin-top: 36px;
position: absolute;
}
.button-menu + ul li a {
text-decoration: none;
}
