html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<link rel="shortcut icon" href="include/favicon.ico" > 5<meta charset="utf-8"> 6<style> 7body{ 8margin: 20px; /* bodyの外側の余白を指定する */ 9padding: 50px 10px 50px 10px; /* bodyの内側余白を指定する(上:右:下:左) */ 10} 11.Header { 12position: fixed; /* ヘッダーを固定する */ 13top: 0; /* 上部から配置の基準位置を決める */ 14left: 0; /* 左から配置の基準位置を決める */ 15width: 100%; /* ヘッダーの横幅を指定する */ 16height: 35px; /* ヘッダーの高さを指定する */ 17padding: 10px; /* ヘッダーの余白を指定する(上下左右) */ 18background-color: #616161; /* ヘッダーの背景色を指定する */ 19color: #ff0000; /* フォントの色を指定する */ 20} 21.Contents { 22width: 100%; /* コンテンツの横幅を指定する */ 23overflow: auto; /* コンテンツの表示を自動に設定(スクロール) */ 24} 25.menu { 26 position: relative; 27 width: 100%; 28 height: 50px; 29 margin: 0 auto; 30} 31 32.menu > li { 33 float: left; 34 width: 25%; /* グローバルナビ4つの場合 */ 35 height: 50px; 36 line-height: 50px; 37 background: rgb(29, 33, 19); 38} 39 40.menu > li a { 41 display: block; 42 color: #fff; 43} 44 45.menu > li a:hover { 46 color: #999; 47} 48 49ul.menu__second-level { 50 visibility: hidden; 51 opacity: 0; 52 z-index: 1; 53} 54 55ul.menu__third-level { 56 visibility: hidden; 57 opacity: 0; 58} 59 60ul.menu__fourth-level { 61 visibility: hidden; 62 opacity: 0; 63} 64 65.menu > li:hover { 66 background: #072A24; 67 -webkit-transition: all .5s; 68 transition: all .5s; 69} 70 71.menu__second-level li { 72 border-top: 1px solid #111; 73} 74 75.menu__third-level li { 76 border-top: 1px solid #111; 77} 78 79.menu__second-level li a:hover { 80 background: #111; 81} 82 83.menu__third-level li a:hover { 84 background: #2a1f1f; 85} 86 87.menu__fourth-level li a:hover { 88 background: #1d0f0f; 89} 90 91/* 下矢印 */ 92.init-bottom:after { 93 content: ''; 94 display: inline-block; 95 width: 6px; 96 height: 6px; 97 margin: 0 0 0 15px; 98 border-right: 1px solid #fff; 99 border-bottom: 1px solid #fff; 100 -webkit-transform: rotate(45deg); 101 -ms-transform: rotate(45deg); 102 transform: rotate(45deg); 103} 104 105/* floatクリア */ 106.menu:before, 107.menu:after { 108 content: " "; 109 display: table; 110} 111 112.menu:after { 113 clear: both; 114} 115 116.menu { 117 *zoom: 1; 118} 119li.menu__mega ul.menu__second-level { 120 position: absolute; 121 top: 40px; 122 left: 0; 123 box-sizing: border-box; 124 width: 100%; 125 padding: 20px 2%; 126 background: #072A24; 127 -webkit-transition: all .2s ease; 128 transition: all .2s ease; 129} 130 131li.menu__mega:hover ul.menu__second-level { 132 top: 50px; 133 visibility: visible; 134 opacity: 1; 135} 136 137li.menu__mega ul.menu__second-level > li { 138 float: left; 139 width: 49%; 140 border: none; 141} 142 143li.menu__mega ul.menu__second-level > li:nth-child(2n+2) { 144 margin: 0 2% 0 0; 145} 146</style> 147<div class="Header"> 148 <ul class="menu"> 149 <li class="menu__mega"> 150 <a href="../index.html"><img src="../img/mls_title_logo.png" alt="" width="100%" height="100%" border="0" /></a> 151 <a href="#" class="init-bottom">メニュー</a> 152 <ul class="menu__second-level"> 153 <li><a href="../top.html">トップページ</a></li> 154 <li><a href="../gamelist.html">ミニゲーム一覧</a></li> 155 <li><a href="../link.html">MLSのSNS情報</a></li> 156 <li><a href="../24hserver.html">24Hサーバーについて</a></li> 157 <li><a href="../aboutmlsbot.html">MLSBOTについて</a></li> 158 <li><a href="../aboutmember.html">会員(スポンサー)制について</a></li> 159 <li><a href="../kihu.html">寄付について</a></li> 160 <li><a href="../staff.html">スタッフ募集</a></li> 161 <li><a href="../komaru.html">MLSが困っています</a></li> 162 <!-- 他メニュー省略 --> 163 </ul> 164 </li> 165 <!-- 他グローバルナビメニュー省略 --> 166 </ul> 167</div> 168</head> 169</html>
cssの扱いがわからなく意味の分からないものになってしまいました。
どこか、CSSの読み方が詳しく書いてあるページなどないでしょうか?
(目標のメニュー(ヘッダーの右半分)にカーソルを合わせると2列のドロップダウンを表示する)
追記
メニューの下2列だけでなくアイコンしたにも2列、合計4列表示させることは可能なのでしょうか?
(質問文は編集できます)teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。(画像として質問文に表示されますし)
回答1件
あなたの回答
tips
プレビュー