header {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #00be4f;
  align-items: center;
  position: fixed;
}
 
.title {
  margin-right: auto;
}
 
.menu-item {
  list-style: none;
  display: inline-block;
  padding: 10px;
}


/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu2 li {
  width: 125px;           /* メニュー項目の横幅(125px) */
  display: inline-block;  /* ★1:横並びに配置する */
  list-style-type: none;  /* ★2:リストの先頭記号を消す */
  position: relative;     /* ★3:サブメニュー表示の基準位置にする */
}
ul.ddmenu2 a {
  background-color: #00be4f; 
  color: rgb(219, 218 ,218);             
  line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
  text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
  text-decoration: none;     /* リンクの下線を非表示 */
  font-weight: bold;         /* 太字 */
  display: block;            /* ★4:項目内全域をリンク可能にする */
}
ul.ddmenu2 a:hover {
  background-color: #bbbbbb; 
  color: #555555;            
}

/* ▼サブメニューを非表示にしておく */
ul.ddmenu2 ul {
  display: none;         /* ★5:非表示にする */
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu2 ul {
   display: none;       /* ★1:標準では非表示にする */
   margin: 0px;         /* ★2:サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* ★3:サブメニュー内側の余白(ゼロ) */
   position: absolute;  /* ★4:固定にする */
}

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合 */
/* ---------------------------------- */
ul.ddmenu2 li:hover ul {
   display: block;      /* ★5:マウスポインターが載っている項目の内部にあるリストを表示する */
}