/**********************************************************************/
/**************************************

メニューバー全体の装飾 ********************



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

.menu30b {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  margin: 0 auto;
  font-family: "Orbitron", sans-serif;

  position: absolute;
     top: 0px;
   right: 30px;

  
}
************/
ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  margin: 0 auto;
  padding: 0.1em 0;
  list-style: none;
  
}

.menu-item {
  background: #fff;/**メインのバック**/
  padding: 0.3em 0.5em;/**0.3　　文字上下**/
  position: relative;
  border-bottom: 5px solid #f99;/**下の線**/
  margin: 0 0.1em;
  transition: border-bottom 0.23s ease-in-out, background 0.23s linear;
  cursor: pointer;
  min-width: 5em;
 height:22;
  width:200px;
padding-left:10px;
}
.menu-item[aria-haspopup=true] {
  border-bottom-color: #fc9b1b;/**下の線色　　１と4　**/
  width:180px;
}
.menu-item:hover, .menu-item:focus-within {
  border-bottom-color: #119911;/**ほーバージの線の色　**/
  background: #ffeeee;/**ほーバージの線の色 　奥のバックの色**/
  width:180px;
}
.menu-item:hover .sub-menu, .menu-item:hover .sub-menu:hover, .menu-item:focus-within .sub-menu, .menu-item:focus-within .sub-menu:hover {
  visibility: visible;
  opacity: 1;
  display: flex;
}

.sub-menu {
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  left: 0;
  margin-top: 0em;
  visibility: hidden;
  display: none;
  opacity: 0;
  background: #ccc;

  
}
.sub-menu .menu-item {
  margin: 0.0em 0;
  padding: 0.2em; /* 高さ*/
  width: 8em;
  
 /* text-align:3 center;*/
  z-index: 2;
  width:180px;
      background: #ddd;
  padding-left:20px;    
  　color:#ddd;
}

a {
  color: #00f;
  text-decoration: none;
  text-transform: uppercase;
}

a.kuro {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
}



a:focus {
  outline: none;
}

@media (max-width: 690px) {
  .menu {
  width: 100%;/**  width:180px;  スマホの時内容狭くなる***/
    font-size: 16px;
  }

  .menu-item {
    margin: 0.1em;
  }
  .menu-item:nth-child(1) {
    order: 0;
  }
  .menu-item:nth-child(2) {
    order: 1;
  }
  .menu-item:nth-child(3) {
    order: 3;
  }
  .menu-item:nth-child(4) {
    order: 4;
  }
  .menu-item:nth-child(5) {
    order: 2;
  }
}
@media (max-width: 480px) {
  .menu {
    font-size: 12px;
  }
}

View Sass Code