利用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 要呈現的部份

 

 

 

 

-----
文章標籤
全站熱搜
創作者介紹
創作者 Pescados 的頭像
Pescados

Ojos que no ven,corazón que no siente.

Pescados 發表在 痞客邦 留言(1) 人氣(915)