nav,ul,liタグとCSSを使ってサブメニューがある横並びのメニューをつくる

nav,ul,liタグとCSSを使ってサブメニューがある横並びのメニューをつくる


実行サンプル

以下メニューのサンプルは、
メニュー1にはサブメニューが3つあり、メニュー2にはサブメニューが2つあり、メニュー3にはサブメニューが1つあり、メニュー4にはサブメニューがありません。

htmlおよびCSS

<nav class="menu_have_submenu">
<ul>
  <li>
    <a>メニュー1</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>メニュー2</a>
    <div>
      <ul>
        <li><a href="">サブメニュー21</a></li>
        <li><a href="">サブメニュー22</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href="">メニュー3</a>
    <div>
      <ul>
        <li><a href="">サブメニュー31</a></li>
      </ul>
    </div>
  </li>
  <li><a href="">メニュー4</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);
}
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>


(参考)本サイト内の縦並び・横並びメニューの一覧



Mam's WebSite