菜单

<span class="hui-dropdown">
  <a class="hui-dropdown-link" data-toggle="hui-dropdown" aria-haspopup="true" aria-expanded="true">点击菜单</a>
  <ul class="hui-dropdown-menu hui-menu radius box-shadow">
    <li class="hui-menu-item"><a href="#">菜单一</a></li>
    <li class="hui-menu-item"><a href="#">菜单二</a></li>
  </ul>
</span>

.hui-menu {
  background-color: #fff;
  border: solid 1px #f2f2f2;
  display: inline-block;
  &.radius {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  &.box-shadow {
    border-top: none;
  }
  > .hui-menu-item {
    position: relative;
    clear: both;
    > a {
      display: block;
      border-bottom: solid 1px #f2f2f2;
      padding: 5px 20px;
      line-height: 1.8;
      text-align: left;
      font-weight: normal;
      white-space: nowrap;
      &:hover,
      &:focus {
        text-decoration: none;
        background-color: #fafafa;
      }
      .arrow {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        right: 5px;
        line-height: 20px;
        height: 20px;
        color: #999;
      }
    }
    &.open > a {
      text-decoration: none;
      background-color: #fafafa;
    }

    &:last-child>a {
      border-bottom: none;
    }
    > .hui-menu {
      display: none;
    }
    &.open {
      > .hui-menu {
        display: inline-block;
        position: absolute;
        left: 100%;
        top: -1px;
        min-width: 100%;
      }
    }

    &.disabled>a {
      color: #999;
      text-decoration: none;
      cursor: no-drop;
      background-color: transparent;
    }
    /*线条*/

    .divider {
      display: block;
      height: 0px;
      line-height: 0px;
      margin: 9px 0;
      overflow: hidden;
      border-top: solid 1px #eee;
    }
  }
}
.hui-dropdown {
  display: inline-block;
  &:focus{
    outline: 0;
  }
  .hui-dropdown-link {
    display: inline-block;
  }
  .hui-dropdown-menu {
    display: none;
    @include transition(all 0.3s ease 0s);
    &:focus {
      outline: 0;
    }
    .hui-menu-item.arrow {
      position: absolute;
      display: block;
      width: 12px;
      height: 8px;
      margin-top: -13px;
      margin-left: 20%;
      line-height: 0;
      background: url(../images/dropDown/icon-jt.png) no-repeat 0 0
    }
  }
  /*鼠标经过*/
  &.hover,
  &.open {
    .hui-dropdown-link {
      text-decoration: none;
      background-color: rgba(255, 255, 255, 0.2); 
    }
  } 
  &.open {
    .hui-dropdown-link{
      .hui-dropdown-arrow {
        transition-duration: 0.3s;
        transition-property: all;
        _background-position: 0 0;
        transform: rotate(180deg);
      }
    }
  }
  >.hui-menu {
    display: none;
  }
  /*打开菜单*/
  &.open {
    position: relative;
    z-index: 990;
    /*默认左对齐*/
    > .hui-dropdown-menu {
      position: absolute;
      z-index: 1000;
      display: inline-block;
      top: 100%;
      left: -1px;
      min-width: 100%;
      background-color: #fff;
      border: solid 1px #f2f2f2;
    }
    /*右对齐*/
    &.right > .hui-dropdown-menu {
      right: -1px!important;
      left: auto!important;
    }
  }
}

.hui-menu {
  background-color: #fff;
  border: solid 1px #f2f2f2;
  display: inline-block;
}
.hui-menu.radius {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.hui-menu.box-shadow {
  border-top: none;
}
.hui-menu > .hui-menu-item {
  position: relative;
  clear: both;
  /*线条*/
}
.hui-menu > .hui-menu-item > a {
  display: block;
  border-bottom: solid 1px #f2f2f2;
  padding: 5px 20px;
  line-height: 1.8;
  text-align: left;
  font-weight: normal;
  white-space: nowrap;
}
.hui-menu > .hui-menu-item > a:hover, .hui-menu > .hui-menu-item > a:focus {
  text-decoration: none;
  background-color: #fafafa;
}
.hui-menu > .hui-menu-item > a .arrow {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  right: 5px;
  line-height: 20px;
  height: 20px;
  color: #999;
}
.hui-menu > .hui-menu-item.open > a {
  text-decoration: none;
  background-color: #fafafa;
}
.hui-menu > .hui-menu-item:last-child > a {
  border-bottom: none;
}
.hui-menu > .hui-menu-item > .hui-menu {
  display: none;
}
.hui-menu > .hui-menu-item.open > .hui-menu {
  display: inline-block;
  position: absolute;
  left: 100%;
  top: -1px;
  min-width: 100%;
}
.hui-menu > .hui-menu-item.disabled > a {
  color: #999;
  text-decoration: none;
  cursor: no-drop;
  background-color: transparent;
}
.hui-menu > .hui-menu-item .divider {
  display: block;
  height: 0px;
  line-height: 0px;
  margin: 9px 0;
  overflow: hidden;
  border-top: solid 1px #eee;
}
.hui-dropdown {
  display: inline-block;
  /*鼠标经过*/
  /*打开菜单*/
}
.hui-dropdown:focus {
  outline: 0;
}
.hui-dropdown .hui-dropdown-link {
  display: inline-block;
}
.hui-dropdown .hui-dropdown-menu {
  display: none;
  transition: all 0.3s ease 0s;
}
.hui-dropdown .hui-dropdown-menu:focus {
  outline: 0;
}
.hui-dropdown .hui-dropdown-menu .hui-menu-item.arrow {
  position: absolute;
  display: block;
  width: 12px;
  height: 8px;
  margin-top: -13px;
  margin-left: 20%;
  line-height: 0;
  background: url(../images/dropDown/icon-jt.png) no-repeat 0 0;
}
.hui-dropdown.hover .hui-dropdown-link, .hui-dropdown.open .hui-dropdown-link {
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.2);
}
.hui-dropdown.open .hui-dropdown-link .hui-dropdown-arrow {
  transition-duration: 0.3s;
  transition-property: all;
  _background-position: 0 0;
  transform: rotate(180deg);
}
.hui-dropdown > .hui-menu {
  display: none;
}
.hui-dropdown.open {
  position: relative;
  z-index: 990;
  /*默认左对齐*/
  /*右对齐*/
}
.hui-dropdown.open > .hui-dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: inline-block;
  top: 100%;
  left: -1px;
  min-width: 100%;
  background-color: #fff;
  border: solid 1px #f2f2f2;
}
.hui-dropdown.open.right > .hui-dropdown-menu {
  right: -1px !important;
  left: auto !important;
}