.headermenublock{ padding:10px 0; position: relative; font-size:.9em; } ul.navi { margin: 0; display: flex; flex-wrap: wrap; } ul.navi li { position:relative; } ul.navi li a{ line-height:1.2em; padding:15px; box-sizing: border-box; text-decoration: none; width: 100%; display: block; position:relative; } ul.navi li ul { min-width:250px; box-sizing:border-box; position: absolute; z-index: 9; top:100%; left:0; background:#f9f9f9; height:0; overflow: hidden; opacity:0; transition: 0.3s; } ul.navi ul ul{ position:relative; } .navi li ul li{ width: 100%; position:relative; } ul.navi li:hover ul{ height:auto; overflow: visible; opacity:1; } ul.navi li a:focus ~ *{ height:auto; overflow: visible; opacity:1; } ul.navi li:focus-within *{ height:auto; overflow: visible; opacity:1; } .navi li ul li a{ color:#000; } .navi li ul li ul li a{ padding-left:40px; } .navi li ul li ul { padding:0; } ul.navi li ul li ul li:after { display: block; content: ''; position: absolute; top: 50%; left:1.8em; width: 4px; height: 4px; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc; transform: rotate(-45deg) translateY(-75%); } .bunnypresslite_dm,.bunnypresslite_check,.navi li ul li ul li:before,ul.navi.bunnypresslite_navi_sp{ display:none; } @media screen and (max-width: 768px) { ul.navi ul,ul.navi ul ul,ul.navi li:hover ul ul { width: 100%; position:relative; opacity: 1; visibility:visible; background: #fff; margin: 0; } .bunnypresslite_dm,ul.navi,.navi li ul li{ display:block; } .header_navi { box-sizing: border-box; position: fixed; padding:4em 0 0; top: 0; right: -300px; width: 300px; height: 100%; background:#fff; transition-duration: .5s; z-index:2; box-shadow:13px 0 10px 10px #333; overflow: auto; } .header_navi:before { content:'MENU'; padding:1em; background:#eee; display:block; } ul.navi li ul li:before { content:'■'; color:#ccc; left:1em; transform:translateY(50%); position:absolute; } ul.navi li a { border-bottom:1px solid #ccc; color:#000 !important; } .navi li ul li a,.navi li ul li ul li a{ padding:1em 1em 1em 2.5em; } .navi li ul li ul li a{ padding-left:40px; } ul.navi.bunnypresslite_navi_pc{ display:none; } ul.navi.bunnypresslite_navi_sp{ display:block; } .bunnypresslite_dm { position: absolute; top:-10px; left: -35px; width: 40px; height: 40px; font-size: 10px; cursor: pointer; z-index: 3; padding:30px 0 0 10px; } .bar { position: absolute; top:0; left: 5px; width: 30px; height: 2px; transition: all .5s; transform-origin: left top; } .bar.middle { top: 10px; } .bar.bottom { top: 20px; } .bunnypresslite_dm_menu { position: absolute; top:22px; right:15px; margin: auto; transition: all .6s; } .bunnypresslite_close { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; transition-duration:1s; visibility: hidden; z-index:1; } .bunnypresslite_check:checked ~ .header_navi { right:0; z-index: 2; box-shadow:15px 0 15px 15px #333; } .bunnypresslite_check:checked ~ .bunnypresslite_dm .bunnypresslite_dm_menu,.bunnypresslite_check:checked ~ .bunnypresslite_dm .bar.middle{ opacity: 0; } .bunnypresslite_check:checked ~ .bunnypresslite_dm .bar.top { width: 36px; transform: rotate(45deg); background:#999; } .bunnypresslite_check:checked ~ .bunnypresslite_dm .bar.bottom { width: 36px; top: 25px; transform: rotate(-45deg); background:#999; } .bunnypresslite_check:checked ~ .bunnypresslite_close { background: rgba(0,0,0,.4); visibility: visible; opacity: 1; } }