CSSだけ使用して、プルダウンメニュー付きの、グローバルメニューの作成

今回は上の画像のようなプルダウンメニュー付きの、グローバルメニューの作成を紹介します。
CSSだけ使用して作成していますので、画像を用意する必要はありません。
完成品はこちらで見れます

まずはコードの紹介

htmlソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>テンプレート</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section>
    <header>
        <nav>
            <ul id="menu">
  <li><a href="#">MENU1</a>
    <ul>
      <li><a href="#">sub-menu1</a></li>
      <li><a href="#">sub-menu2</a></li>
      <li><a href="#">sub-menu3</a></li>
    </ul>
  </li>
  <li><a href="#">MENU2</a>
    <ul>
      <li><a href="#">sub-menu1</a></li>
      <li><a href="#">sub-menu2</a></li>
      <li><a href="#">sub-menu3</a></li>
      <li><a href="#">sub-menu4</a></li>
    </ul>
  </li>
  <li><a href="#">MENU3</a>
    <ul>
      <li><a href="#">sub-menu1</a></li>
      <li><a href="#">sub-menu2</a></li>
      <li><a href="#">sub-menu3</a></li>
    </ul>
  </li>
  <li><a href="#">MENU4</a>
    <ul>
      <li><a href="#">sub-menu1</a></li>
      <li><a href="#">sub-menu2</a></li>
      <li><a href="#">sub-menu3</a></li>
      <li><a href="#">sub-menu4</a></li>
    </ul>
  </li>
  <li><a href="#">MENU5</a>
    <ul>
      <li><a href="#">sub-menu1</a></li>
      <li><a href="#">sub-menu2</a></li>
      <li><a href="#">sub-menu3</a></li>
      <li><a href="#">sub-menu4</a></li>
    </ul>
  </li>
  <li><a href="#">MENU6</a>
    <ul>
      <li><a href="#">sub-menu1</a></li>
      <li><a href="#">sub-menu2</a></li>
      <li><a href="#">sub-menu3</a></li>
    </ul>
  </li>

</ul>

        </nav>
    </header>
</section>
    <article>
</article>
    <aside>
    </aside>
<footer>
</footer>
</body>
</html>

スタイルシート



#menu{
  list-style-type: none;
  width: 870px;
  height: 40px;
  margin: 100px auto;
  padding: 0;
  background: #000000;
  border-bottom: 3px solid #808080;
  border-radius: 10px 10px 0px 0px;
}
#menu li{
  position: relative;
  width: 16.66%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#menu li a{
  display: block;
  margin: 0;
  padding: 12px 0 12px;
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
}
#menu li:hover > a{
  background: #696969;
  color: #ffffff;
}
#menu > li:hover > a{
  border-radius: 10px 10px 0px 0px;
}
#menu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  border-radius: 10px 10px 0px 0px;
}
#menu li ul li{
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #fff;
}
#menu li ul li a{
  padding: 13px 15px;
  background: #000000;
  text-align: left;
  font-size: 15px;
  font-weight: normal;
}
#menu li:hover ul li{
  overflow: hidden;
  height: 34px;
  border-bottom: 1px solid #ffffff;
}
#menu li:hover ul li:last-child a{
  border-radius: 0px 0px 20px 20px;
}

コードの解説

#menu{
  list-style-type: none;
  width: 870px;
  height: 40px;
  margin: 100px auto;
  padding: 0;
  background: #000000;
  border-bottom: 3px solid #808080;
  border-radius: 10px 10px 0px 0px;
}

list-style-type: none;
「・」をなくします
width: 870px;
ナビの幅を870pxに指定
height: 40px;
ナビの高さを40pxに指定
margin: 100px auto;
TOPから100px間隔をあける為に指定、実際に使う環境に合わせて指定し直してださい。autoを入れることで中央に調整されナビが配置されます。
border-bottom: 3px solid #808080;
ナビの下部分に3px分の色の違うスペースを作る為に使用#の後はカラーコードです。
html色見本サイト
border-radius: 10px 10px 0px 0px;
ナビ上部を丸める為に指定しています。

メニュー親要素の設定


#menu li{
  position: relative;
  width: 16.66%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#menu li a{
  display: block;
  margin: 0;
  padding: 12px 0 12px;
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
}
#menu li:hover > a{
  background: #696969;
  color: #ffffff;
}
#menu > li:hover > a{
  border-radius: 10px 10px 0px 0px;
}

position: relative;
親要素を基準として配置する為、relativeを指定します。
width: 16.66%;
メニューを6個にしてあるので均等にする為16.6％で指定しています。
float: left;
メニューを横並びにする為に必要です。
text-align: center;
文字を中心に配置する為に指定。
text-decoration: none;
アンダーラインを消しています。
font-weight: bold;
フォントを太字に指定。
background: #696969;
カーソルが載っている時の、色を指定しています。（[li:hover > a]この部分でカーソルが載っている場合と指定。）

メニュー子要素の設定

#menu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  border-radius: 10px 10px 0px 0px;
}
#menu li ul li{
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #fff;
}
#menu li ul li a{
  padding: 13px 15px;
  background: #000000;
  text-align: left;
  font-size: 15px;
  font-weight: normal;
}
#menu li:hover ul li{
  overflow: hidden;
  height: 34px;
  border-bottom: 1px solid #ffffff;
}
#menu li:hover ul li:last-child a{
  border-radius: 0px 0px 20px 20px;
}

position: absolute; top: 100%;
「#menu li」を基準に表示位置を指定。「top: 100%;」で親メニューの真下に表示するように指定しています。
menu li:hover ul li:last-child a
最後の子要素のみ角を丸めるように指定しています。

完成品はこちらで見れます

前回作成した、簡単なグローバルナビはこちら