二级浮动菜单（angularjs2 + css）

UX给出这个要求，就是dc下有多个云环境，要求dc是下拉菜单，云环境在右边显示，拿到需求还有点蒙，同事说很像京东页面啊，搜了下，有人实现过，照着改了改

大概就是先写个下拉菜单，然后右边的部分先隐藏，等hover左边的li的时候，显示右边部分，用例很多绝对定位~还好之前多看了看张鑫旭老师的课~~

css部分

<style>
  .nav_item{
    /*width:300px;*/
    /*text-align: center;*/
    font-size: 12px;
    height:30px;
    line-height: 30px;
    padding-right: 10px;
    padding-left: 10px;
    border-bottom: 1px solid #ccc;
  }
  .sub_menu{
    display: none;
    overflow-y: auto;
    background: white;
    height: 300px;
    width: 270px;
    position: absolute;
    left: 152px;
    top: -1px;
    border: 1px solid #ccc;   
  }
  .span_test{
    display: none;
    position: absolute;
    right: 2px;
    background-color: white;
    height: 29px;
    z-index: 20;
    width: 10px;
  }
  .nav_item_color{
    color: #000000;
  }

  ul li:hover .sub_menu{display:block}
  ul li:hover .nav_item{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  ul li:hover .span_test{display:inline-block}
  ul li:hover .nav_item_color{color: #1898eb}

  .Evnlist{
    /*min-height: 300px;*/
    list-style: none;
    font-size: 12px;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  
  }
 .subMenuList {
   padding-left: 5px;
 }

  .dropdown-menu-dc {
    min-height: 300px;
    position: absolute;
    top: 100%;
    left: 0;
    float: left;
    min-width: 160px;
    padding: 0px 0px;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    box-shadow: none;
    border-radius: 0px;
    border: 1px solid rgba(0,0,0,.15);

  }
  .chooseInput{
    width:270px;
    padding: 5px;
    height:30px;
    border:1px solid #ddd;
  }
  .title{
    margin-top: -20px;
    margin-left: 6px;
    position: absolute;
  }

</style>

代码部分

 <div class="form-group">
    <label class="form-group-left">请选择云环境</label>
    <div class="btn-group">
      <input id="EnvTitle" [(ngModel)]="title" [ngModelOptions]="{standalone:true}" class="chooseInput" readonly="readonly" data-toggle="dropdown" id="dropdownMenu1" placeholder="请选择云环境" >

      <ul class="dropdown-menu dropdown-menu-top dropdown-menu-dc" role="menu" aria-labelledby="dropdownMenu1">
        <li class="nav_item" *ngFor="let item of dcs" role="presentation">
          <div>
            <span class="nav_item_color">{{item.name}}</span>
            <span class="span_test"></span>
          </div>

          <div class="sub_menu">
            <ul class="Evnlist">
              <li class="subMenuList" *ngFor="let Evn of item.cloudEnvs" (click)="RefreshAlarmConfig(Evn,item)">{{Evn.name}}
              </li>
            </ul>
          </div>
        </li>
       
      </ul>
    </div>
  </div>