ナビ：バルーン滋賀県守山市のホームページ制作

★ナビ：マウスオーバーでバルーンが表示
パターン１
HTML

<nav id="globalNav">
        <ul>
            <li><a href="#">ホーム<span>【モカビーンズ】の<br>ホームページ<br>最初のページ<br>に戻ります。</span></a></li>
            <li><a href="#">会社案内<span>【モカビーンズ】の<br>ホームページ<br>最初のページ<br>に戻ります。</span></a></li>
            <li><a href="#">事業案内<span>【モカビーンズ】の<br>ホームページ<br>最初のページ<br>に戻ります。</span></a></li>
            <li><a href="#">導入事例<span>【モカビーンズ】の<br>ホームページ<br>最初のページ<br>に戻ります。</span></a></li>
            <li><a href="#">採用情報<span>【モカビーンズ】の<br>ホームページ<br>最初のページ<br>に戻ります。</span></a></li>
            <li><a href="#">お知らせ<span>【モカビーンズ】の<br>ホームページ<br>最初のページ<br>に戻ります。</span></a></li>
            <li><a href="#">お問い合わせ<span>【モカビーンズ】の<br>ホームページ<br>最初のページ<br>に戻ります。</span></a></li>
        </ul>
    </div>
</nav>
<!-- /ID globalNav -->

CSS

#globalNav {
    display: block;
    margin: 0;
    padding: 0;
    height: 67px;
    clear: both;
}
 
#globalNav ul {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
 
#globalNav li {
    display: inline;
}
 
#globalNav li a {
    display: block;
    margin: 0;
    padding: 30px 0;
    width: 14%;
    float: left;
    text-align: center;
    list-style: none;
    background: #EEE;
    border-right: 2px solid #FFF;
    color: #333;
    letter-spacing: 0.1em;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	position: relative;
}

#globalNav li a:hover {
	background: #063;
	color: #FFF;
}

/* バルーン */


#globalNav a span{ /* 起点 */
	position: absolute;
	opacity: 0;
	top: 150px;
	left: -15px;
	width: 130px;
	height: 103px;
	padding: 50px 10px 10px 10px;
	border-radius: 2px;
	background: url(img/nav-balloon/nav-bloon.png) no-repeat center top;
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	transition: .3s;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 3;
}

#globalNav a:hover span{
  opacity: 1;
  top: -10px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

#globalNav a:hover span{ /* 表示点 */
  opacity: 1;
  top: 80px;
  left: 10px;
}

サンプル
—————
パターン2
CSS

#globalNav {
    display: block;
    margin: 0;
    padding: 0;
    height: 67px;
    clear: both;
}
 
#globalNav ul {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
 
#globalNav li {
    display: inline;
}
 
#globalNav li a {
    display: block;
    margin: 0;
    padding: 30px 0;
    width: 14%;
    float: left;
    text-align: center;
    list-style: none;
    background: #EEE;
    border-right: 2px solid #FFF;
    color: #333;
    letter-spacing: 0.1em;
	position: relative;
}

#globalNav li a:hover {
	background: #063;
	color: #FFF;
}

#globalNav a span{ /* 表示位置 */
  position: absolute;
	opacity: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	top: 0;
	left: 10px;
	width: 130px;
	height: 103px;
	padding: 50px 10px 10px 10px;
	border-radius: 2px;
	background: url(img/nav-balloon/nav-bloon.png) no-repeat center top;
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	transition: .3s;
}
#globalNav a span:after{ /* 起点 */
  position: absolute;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  top: 100px;
  left: 34px;
  height: 0;
  width: 0;
  border: 6px solid transparent;
  border-top: 6px solid #196090;
  content: "";
}
#globalNav a:hover span{
	opacity: 1;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	top: 80px;
}

#globalNav a span{
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(90deg);
}

#globalNav a:hover span{
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

サンプル