マウスオーバー時にナビに三角マークを表示させる
ナビゲーションボタンのマウスオーバーの状態として、ボタンの下に三角マークが表示されるものがあります。
CSSを使った方法を記述しておきます。
マウスオーバーしていない時のナビボタンの表示
マウスオーバーしている時のナビボタンの表示（三角マークが下にでています）
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ナビボタンホバー時に三角マークを表示</title>
<link rel="stylesheet" href="css/style.css" media="screen, projection, print" />
</head>
<body>
<header>
<nav id="gnav">
<ul>
<li id="products"><a href="#">ナビボタン</a></li>
</ul>
</nav>
</header>
</body>
</html>
@charset "utf-8";
/* Reset CSS
--------------------------------------*/
body, ul, li, nav, header {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
/* ナビゲーション
--------------------------------------*/
#gnav a {
display: block;
position: relative;
z-index: 1;
height: 30px;
padding-top: 20px;
text-align: center;
color: green;
background-color: greenyellow;
}
/* 疑似要素にborderを使った三角マークを記述 */
#gnav a:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -10px;/*三角をボタンの下のラインに合わせます*/
left: 50%;/*三角を横方向中央にします*/
margin-left: -10px;/*border-leftの10px分左にずらして完全な中央にします*/
border-left: solid 10px transparent;/*border-rightと同じ幅にします*/
border-right: solid 10px transparent;/*border-leftと同じ幅にします*/
}
/* マウスオーバー時にborderを使った三角マークを表示 */
#products a:hover:after {
border-top: solid 10px green;
}
以上
