CSSの扱いがわからなくヘッダーのドロップダウンに苦戦している。

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">２４Hサーバーについて</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>