JSFiddle - React, Tailwind, and code Playground

by imys

HTML

<ul>
  <li class="nav-item root-item">
    <a href="">导航</a>
    <ul class="nav-item-childs">
      <li><a href="">111</a></li>
      <li><a href="">11111</a></li>
      <li class="nav-item">
        <a href="">222 &gt;</a>
        <ul class="nav-item-childs">
          <li class="nav-item">
            <a href="">3333 &gt;</a>
            <ul class="nav-item-childs">
              <a href="">4444</a>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS

* {
  margin: 0;padding: 0
}
ul, li {
  list-style: none
}
a {
  text-decoration: none;
  color: #333
}
.root-item {
  display: inline-block;
}
.root-item> a {
  background: #1C90F3;
}
.nav-item {
  position: relative;
}
.nav-item a {
  display: block;
  line-height: 30px;
  padding: 0 1em;
  background: #1C90F3;
  color: #fff;
  white-space: nowrap;
}
.nav-item ul {
  display: none;
}
.nav-item:hover > ul {
  display: block;
}
.nav-item-childs {
  position: absolute;
  top: 30px;
  left: 0;
}
.nav-item-childs a {
  opacity: .7;
}
.nav-item-childs ul {
  top: 0;
  left: 100%;
}