/*-----navigator-----*/ nav { width: 100%; height: 8%; position: fixed; /*border-top: 15px solid #316745; border-bottom: 5px solid #316745; */ background: #98b98e; margin: 0; } .main-menu { overflow: hidden; list-style: none; margin: 0 auto; padding: 0; } .main-menu li { box-sizing: border-box; float: left; /*border-right: 0.5px solid #316745; border-left: 0.5px solid #316745; */ width: 20%; } .main-menu li a { display: block; padding: 9% 0 8% 0; width: 100%; text-align: center; font-size: 18px; font-weight: bold; color: #ffffff; transition: 0.5s; } .main-menu li a.imamap { background: #316745; } .main-menu li a.imamap:hover { background-image: url("../Map/birder/material/navpic1.JPG"); background-size: 100%; animation: fadeIn 1s; } .main-menu li a.imazukan { background: #00aa6e; } .main-menu li a.imazukan:hover { background-image: url("../Map/birder/material/navpic1.JPG"); background-size: 100%; animation: fadeIn 1s; } /*メインメニューの色が変化するホバー*/ .main-menu li:hover > a { background: #316745; transition: 0.5s; /*check*/ } /*ここがサブを表示させるホバー*/ .main-menu li:hover ul li { overflow: visible; height: 100%; transition: 0.5s; animation: fadeIn 1s; } /*特別ですよ*/ @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } /*ここがサブ表示にホバーした時のアクション*/ .main-menu li ul li:hover a { background: #98b98e; } /* .main-menu li:hover ul li:first-child { border-top: 0; } .main-menu li:hover ul li:last-child { border-bottom: 0; }*/ .main-menu li:last-child { border-right: none; } .main-menu li ul { margin: 0; padding: 0; } .main-menu li ul li{ position: relative; margin: 0; padding: 0; list-style: none; overflow: hidden; width: 100%; height: 0; background: #316745; transition: 0.5s; -moz-transition: .2s; /*古い機種にも対応させる*/ -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; /*ここまで*/ animation: fadeOut 1s; } /*特別ですよPart.2*/ @keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } .main-menu li ul li a{ margin: 0; padding: 5px 0; background: #316745; text-align: center; font-size: 15px; font-weight: bold; } .main-menu li ul li a.imakokonokoko { background: #00533f; }