作成したメニュー
以下メニューのサンプルは、 メニュー１にはサブメニューが3つあり、メニュー２にはサブメニューが２つあり、 メニュー３にはサブメニューが１つあり、メニュー４にはサブメニューがありません。
htmlおよびCSS
<nav class="menu_have_submenu">
<ul>
<li>
<a>メニュー１</a>
<div>
<ul>
<li><a href="">サブメニュー11</a></li>
<li><a href="">サブメニュー12</a></li>
<li><a href="">サブメニュー13</a></li>
</ul>
</div>
</li>
<li>
<a>メニュー２</a>
<div>
<ul>
<li><a href="">サブメニュー21</a></li>
<li><a href="">サブメニュー22</a></li>
</ul>
</div>
</li>
<li>
<a>メニュー３</a>
<div>
<ul>
<li><a href="">サブメニュー31</a></li>
</ul>
</div>
</li>
<li><a href="">メニュー４</a></li>
</ul>
</nav>
<style>
/* サブメニューを持つ水平メニュー */
nav.menu_have_submenu{
box-sizing:border-box;
width:100%;
margin-top:0;
margin-left:0;
padding-top:0;
padding-right:6px;
padding-left:0;
padding-bottom:6px;
/******* 基本のフォントサイズ *******/
font-size:16px;
font-family:"Helvetica Neue",Arial,
"Hiragino Kaku Gothic ProN","Hiragino Sans",
Meiryo,sans-serif;
}
nav.menu_have_submenu>ul{
display:flex;
justify-content:center;
list-style:none;
margin:0;
padding:0;
/*border:1px solid #acf;*/
border:none;
/******* メニューの背景色 *******/
background:linear-gradient(0deg,#ddd,#fff);
box-sizing:border-box;
width:100%;
box-shadow:4px 4px 6px 0px rgba(0,0,0,0.4);
}
nav.menu_have_submenu>ul>li{
/*border-right:1px solid #ddd;*/
}
nav.menu_have_submenu>ul>li:first-child{
/*border-left:1px solid #ddd;*/
}
nav.menu_have_submenu>ul>li:hover{
/******* メニューホバー時の背景色 *******/
background:#eee;
}
nav.menu_have_submenu>ul>li>a{
display:block;
padding:12px 20px;
text-decoration:none;
font-weight:bold;
text-shadow: 1px 2px 3px #999;
cursor:default;
}
nav.menu_have_submenu>ul>li>a,
nav.menu_have_submenu>ul>li>a:link,
nav.menu_have_submenu>ul>li>a:visited,
nav.menu_have_submenu>ul>li>a:hover,
nav.menu_have_submenu>ul>li>a:active,
nav.menu_have_submenu>ul>li>a:focus{
/******* メニューの文字色 *******/
color:#666;
}
nav.menu_have_submenu>ul>li>a[href]{
cursor:pointer;
}
nav.menu_have_submenu>ul>li>div{
position:absolute;
display:none;
margin:0;
padding:0;
box-shadow:4px 4px 6px 0px rgba(0,0,0,0.4);
z-index:1000;
}
nav.menu_have_submenu>ul>li:hover>div{
display:block;
}
nav.menu_have_submenu>ul>li>div>ul{
position:relative;
list-style:none;
margin:0;
padding:0;
/*border:1px solid #acf;*/
border:none;
/******* サブメニューの背景色 *******/
background:linear-gradient(0deg,#ddd,#fff);
}
nav.menu_have_submenu>ul>li>div>ul>li:hover{
/******* サブメニューのホバー時の背景色 *******/
background:#ddd;
}
nav.menu_have_submenu>ul>li>div>ul>li>a{
display:block;
padding:12px 20px;
text-decoration:none;
text-shadow: 1px 2px 3px #333;
cursor:default;
}
nav.menu_have_submenu>ul>li>div>ul>li>a[href]{
cursor:pointer;
font-size:0.8em;
}
nav.menu_have_submenu>ul>li>div>ul>li>a,
nav.menu_have_submenu>ul>li>div>ul>li>a:link,
nav.menu_have_submenu>ul>li>div>ul>li>a:visited,
nav.menu_have_submenu>ul>li>div>ul>li>a:hover,
nav.menu_have_submenu>ul>li>div>ul>li>a:active,
nav.menu_have_submenu>ul>li>div>ul>li>a:focus{
/******* サブメニューの文字の色 *******/
color:#333;
}
</style>
垂直(縦並び)メニューのサンプル一覧
nav,ul,liタグとCSSを使って縦並びのメニューをつくる
CSSとJavascriptで円弧に沿った形の縦並びのメニューを作る
nav,ul,liタグとCSSを使ってカラフルなボタンの縦並びのメニューをつくる
nav,ul,liタグとCSSを使ってカラフルな縦並びのメニューをつくる
nav,ul,liタグとCSSを使って立体ボタンの縦並びのメニューをつくる
nav,ul,liタグとCSSを使って立体ボタンのカラフルな縦並びのメニューをつくる
水平(横並び)メニューのサンプル一覧
nav,ul,liタグとCSSを使って横並びのメニューをつくる
nav,ul,liタグとCSSとJavascriptで水平(横並び)自動スクロールするメニューをつくる
CSSでSVGアイコンを下部に固定した横並びのメニューがあるページ作る
nav,ul,liタグとCSSを使ってサブメニューがある横並びのメニューをつくる