ナビにプルダウンメニューを付ける

天地が76pxのnaviメニューに対して、天地25px、左右130pxのプルダウンメニューにする場合、main. cssのナビメニューの下に以下を追加し保存するだけ。そんでこんな風になります。と思うけどやってみて。責任はもちませんが。

/* Navigation .list2 */
#navigator .list2 ul { 
	list-style: none;
	margin: 0;
	padding: 0;
}
#navigator .list2 {
  font-family: Arial, Helvetica, sans-serif;
 z-index: 100;
 position: relative;
}
#navigator .list2 li {
 border-left: 1px solid gray;
 float: left;
 margin: 0;
 padding: 0;
 position: relative;
}
#navigator .list2 li a, #navigator .list2 li a:link,  #navigator .list2 li  a:active, #navigator .list2 li a:visited {
 font-size: 14px;
 line-height: 25px;
 background: #000;
 color: #cccccc;
 display: block;
 padding: 0 6px;
 text-decoration: none;
 width: 210px;
}
#navigator .list2 li a:hover {
 background: gray;
 color: #cacaca;	
}
#navigator .list2  li:hover a, #navigator .list2 li.sfHover a {
 background: gray;
 color: #cacaca;
}
#navigator .list2 li:hover ul a, #navigator .list2 li.sfHover ul a {
 background: #000;
 color: #cacaca;	
}
#navigator .list2 li:hover ul a:hover,  #navigator .list2 li.sfHover ul a:hover {
 background: gray;
 color: #cacaca;	
} 
#navigator .list1 ul {
 width: 130px;
 margin: 0;
 top: -999em;
}
 #navigator .list2 ul {
 list-style: none;
 margin: 0;
 position: absolute;
}
#navigator .list1 li:hover ul, #navigator .list1 li.sfHover ul, 
#navigator .list2 li:hover ul, #navigator .list2 li.sfHover ul {
 top: 0px;
}
#navigator .list1 ul li,  #navigator .list2 ul li {
 border: 0;
 float: none;
}
#navigator .list1 ul a, #navigator .list2 ul a {
 border: 1px solid #ccc;
 border-bottom: 0;
 padding-right: 20px;
 white-space: nowrap;
}
#navigator .list2 ul a:hover {
 color: #000;
}

コメント


認証コード0246

コメントは管理者の承認後に表示されます。

ナビにプルダウンメニューを付ける