天地が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;
}
