利用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) 人氣()