メニューバーを追加するCSS

目的

muragonのカスタマイズ。

<header>下にメニューバーを追加する。
親メニューにhoverした際、子メニューをプルダウン表示可。

CSS

.nav-wrap{
width : 970px;
margin : 0 auto
}

.nav-wrap ul {
padding : 0;
}

.nav-body {
display : flex;
}

.nav-body li {
width : 194px; /* ボタン幅 */
list-style : none;
}

.nav-body li a {
display : block;
color : #333;
background : linear-gradient(#ffffff 0%, #e3e3e3 100%);
line-height : 40px; /* ボタン高さ */
text-decoration : none;
text-align : center;
}

.nav-body li a:hover {
background : linear-gradient(#ffffff 0%, #FFCDD2 100%);
}

/* 子メニュー */
.nav-body li ul {
position : absolute;
display : none;
}

.nav-body li:hover ul {
display : block;
}

HTML

<div class="nav-wrap">
<ul class="nav-body">
<li><a href="メニュー1のURL">メニュー1</a></li>
<li><a href="#">メニュー2</a>
<ul>
<li><a href="メニュー2-1のURL">メニュー2-1</a></li>
<li><a href="メニュー2-2のURL">メニュー2-2</a></li>
<li><a href="メニュー2-3のURL">メニュー2-3</a></li>
</ul>
</li>
<li><a href="メニュー3のURL">メニュー3</a></li>
<li><a href="メニュー4のURL">メニュー4</a></li>
<li><a href="#">メニュー5</a>
<ul>
<li><a href="メニュー5-1のURL">メニュー5-1</a></li>
<li><a href="メニュー5-2のURL">メニュー5-2</a></li>
</ul>
</li>
</ul>
</div>