JSFiddle - React, Tailwind, and code Playground

by takmatz

HTML

<nav id="gNav">
  <ul>
    <li class="current-menu-item"><a href="index.html">ホーム<span>Home</span></a></li>
    <li><a href="A.html">A<span>a</span></a>
      <ul class="submenu">
        <li><a href="A.html">A</a></li>
        <li><a href="B.html">B</a></li>
        <li><a href="C.html">C</a></li>
        <li><a href="D.html">D</a></li>
        <li><a href="E.html">E</a></li>
      </ul>
    </li>
    <li><a href="F.html">F<span>f</span></a>
      <ul class="submenu">
        <li><a href="A.html">A3</a></li>
        <li><a href="B.html">B3</a></li>
        <li><a href="C.html">C3</a></li>
        <li><a href="D.html">D3</a></li>
        <li><a href="E.html">E3</a></li>
      </ul>
    </li>
    <li><a href="G.html">G<span>g</span></a></li>
    <li><a href="H.html">H<span>h</span></a></li>
  </ul>
</nav>

CSS

/* エリア外枠のスタイル */
#gNav {
  margin-bottom: 25px;
}

/* メニューリストを囲む枠 */

#gNav ul {
  display: -webkit-flex;    /* safari用 */
  display: flex;
}

/* メニューリストの共通スタイル */
#gNav li {
  border-left: 1px solid brown;
  height: 45px;
  text-align: center;
  width: 20%;
}

/* 一番右のメニューリストのスタイル */
#gNav li:last-child {
  border-right: 1px solid brown;
}

/* メニューのリンクスタイル */
#gNav a{
  color: brown;
  display: block;
  font-size: 16px;
  text-decoration: none;
}

/* メニューにマウスを乗せたときのスタイル */
#gNav a:hover {
  background-color: yellowgreen;
}

/* メニューの英文字スタイル */
#gNav a span {
  color: deeppink;
  display: block;
  font-family: arial;
  font-size: 14px;
}

/* 現在ページのメニュースタイル */
#gNav .current-menu-item a, #gNav .current-menu-item a span {
  background-color: yellowgreen;
  color: #ffffff;
}

/* メニューのサブメニュー */

#submenu li {
  width: 120px; /* リスト項目の幅 */
}

#submenu a {
  text-align: center; /* 文字を中央合わせに */
  padding: 5px; /* 内部の余白 */
  border:  1px deeppink solid; /* 枠線 */
  background: white; /* 通常の背景 */
  height:30px; /* 高さの調整 */
}

#gNav .submenu {
  display: none; /* 通常は表示しない */
}

#gNav li:hover > .submenu  {
  display: block; /* マウスが乗ったら表示する */
}