SOURCE

console 命令行工具 X clear

                    
>
console
    <ul class="top-menu">
      <li>
        <span class="menu">酒店</span>
        <ul class="menu-item">
            <li>国内酒店</li>
            <li>海外酒店</li>
            <li>团购</li>
            <li>特价酒店</li>
            <li>客栈民宿</li>
        </ul>
      </li>
      <li>
        <span class="menu">旅游</span>
        <ul class="menu-item">
            <li>旅游首页</li>
            <li>周末游</li>
            <li>跟团游</li>
            <li>自由行</li>
            <li>游轮</li>
        </ul>
      </li>
      <li>
        <span class="menu">机票</span>
        <ul class="menu-item">
            <li>国内机票</li>
            <li>特价机票</li>
            <li>航班动态</li>
            <li>退票改签</li>
            <li>机场巴士</li>
        </ul>
      </li>
      <li>
        <span class="menu">火车</span>
        <ul class="menu-item">
            <li>国内火车票</li>
            <li>国际·港台火车票</li>
        </ul>
      </li>
      <li>汽车票</li>
      <li>用车</li>
      <li>门票</li>
      <li>团购</li>
      <li>我的携程</li>
    </ul>
ul {
  padding-left: 0;
  cursor: default;
}

ul.top-menu {
  position: relative;
  list-style: none;
  font-size: 14px;
  background-color: #2577e3;
  color: white;
  line-height: 32px;
}

ul.top-menu > li {
  display: inline-block;
  margin: 0 10px;
}

ul.menu-item {
  display: none;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 32px;
  width: 100%;
  list-style: none;
  background-color: white;
  color: black;
  border: 1px solid #2577e3;
  border-top-width: 0
}

ul.top-menu > li:hover > ul.menu-item {
    display: block;
}

ul.menu-item > li {
    display: inline-block;
    padding: 0 10px;
    line-height: 16px;
}
ul.menu-item > li+li {
    border-left: 1px solid silver;
}