利用CSS 做出橫式的 Drop Menu
分成兩段
先做 CSS的部份
#nav {margin:0px 0 0px 0;}
#nav {
float:left;
width:933px; /*這段指的是MENU的長度 */
height:auto;
background:#fff url("../dropline/bottom_line.gif") repeat-x bottom;
/*MENU如果要有圖片 就在這邊設定*/
position:relative;
}
#nav .select, #nav .current {
margin:0;
padding:0;
list-style:none; display:block;
}
#nav li {
display:inline; /*把列點出來的圈圈隱藏起來*/
margin:0;
padding:0;
height:auto;
}
#nav .select a,#nav .current a {
display:block;
height:47px;
float:left;
background: url("../dropline/left_blue.gif") no-repeat left top;
padding:0px 0 0 3px;
border-bottom:1px solid #000;
text-decoration:none;
font-size:12px;
font-family: Century-Gothic,Arial, Helvetica, sans-serif;
line-height:13px;
white-space:nowrap;
margin-left:2px;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); /*做濾鏡效果*/
opacity:0.8;
}
* html #nav .select a, * html #nav .current a {
width:1px;
}
#nav .select a b,#nav .current a b {
height:100%;
display:block;
background:url("../dropline/right_blue.gif") no-repeat right top;
padding:0 6px 0 3px;
color:#575639;
}
#nav .select a:hover, #nav .select li:hover a {
background-position:0 -75px;
border-color:#046;
cursor:pointer;
}
#nav .select a:hover b, #nav .select li:hover a b {
background-position:100% -75px;
border-color:#046;
color:#339900;
}
#nav .sub {display:none;}
/* for IE5.5 and IE6 only */
#nav table {
position:absolute;
border-collapse:collapse;
left:0;
top:0;
font-size:11px;
}
#nav .current a {
background-position:0 -75px;
border-color:#046;
}
#nav .current a b {
background-position:100% -75px;
color:#575639;
}
#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {
background:#ffffff url("../dropline/sub_sep.gif") top right no-repeat;
color:#000;
text-decoration:underline;
}
#nav .sub_active .current_sub a,
#nav .sub_active a:hover {
background:#fffffff url("../dropline/sub_sep.gif") top right no-repeat;
color:#000;
text-decoration:underline;
}
#nav .select li a:hover .sub,
#nav .select li:hover .sub {
display:block;
position:absolute;
width:933px;
top:45px;
left:0;
background:#ffffff;
margin-top:1px;
padding:0;
z-index:100;
border-bottom:4px solid #fff;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
#nav .sub, #nav .sub_active {
margin:0;
padding:0;
list-style:none;
}
#nav .sub_active {
display:block;
position:absolute;
width:933px;
top:47px;
left:0;
background:#ffffff;
margin-top:1px;
padding:0;
z-index:10;
color:#000;
border-bottom:20px solid #fff;
}
* html #nav .sub_active, * html #nav .select a:hover .sub {
z-index:-1;
margin-top:0;
margin-t\op:1px;
}
#nav .sub_active a {
height:25px;
float:left;
text-decoration:none;
line-height:24px;
white-space:nowrap;
font-weight:normal;
}
#nav .sub_active a,
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {
display:inline;
background:transparent url("../dropline/sub_sep.gif") top right no-repeat;
padding:0 10px;
margin:0;
font-size:12px;
width:auto;
white-space:nowrap;
font-weight:bold;
border:0;
color:#000;
height:25px;
line-height:24px;
font-family: Century-Gothic,Arial, Helvetica, sans-serif;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
CSS做完之後 在HTML 要呈現的部份
-----
留言列表