リストで作ったメニューにブロック要素を適用

2015/05/26

■リストでメニューを作って、リンク範囲をテキストからブロックに変更する方法■

ul  の幅
li  の幅
li a の幅(3つとも)

の【width】を同じ値にする。

li a.link
li a.visited
li a.hover

に【display: block】を指定する。

==============CSSサンプル=================

ul {
margin: 0px;
padding: 0px;
font-size: 12px;
color: #FF0000;
width: 180px;
}

li a:link {
color: #666666;
text-decoration: none;
font-size: 12px;
display: block;
height: 100%;
width: 180px;
}

li a:visited {
color: #666666;
text-decoration: none;
font-size: 12px;
display: block;
height: 100%;
width: 180px;
}

li a:hover {
text-decoration: underline;
font-size: 12px;
display: block;
width: 180px;
}

==============HTMLサンプル================

<ul>
<li><a href="URL"> アンカーテキスト </a></li>
<li><a href="URL"> アンカーテキスト </a></li>
<li><a href="URL"> アンカーテキスト </a></li>
</ul>

  • このエントリーをはてなブックマークに追加
  • Pocket