縦に広げるメニュー
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>メニュー</title> <style> <!-- *{margin:0;padding:0;} ul{list-style-type:none;} .menu{display:none;} .check{display:none;} .switch {display:inline-block;width:1rem;height:1rem;} .switch span{color:red;display:inline-block;transform: rotate( -90deg );} .switch + a + ul{position:relative;left:1rem;display:none;} .check:checked + label span{transform: rotate( 0 );} .check:checked + label + a + ul {display:block;} --> </style> </head> <body> <input type="checkbox" id="menu00" class="check" value="0" /><label for="menu00" class="switch"><span>▼</span></label> <a>メニュー</a> <ul class="menu"> <li><input type="checkbox...