室內設計
 
尚佶網頁設計主選單
網頁美編設計製作
行動手機‧行動電視
網頁設計
網頁設計
最新訊息:
  網頁設計全球效應
  網頁設計的行銷效用?
設計作品經歷:
  昇華文件櫃有限公司
Shen Hua Filing Cabinet
File Cabinet
  戀戀紅葡萄酒酒莊 酒莊
  美和美吊扇公司
  HCB AUTO TOOLS
  逸通房屋拆除工程 . 房屋拆除 . 台中拆除
  鳳凰企業社
  國立中正大學行銷創意研究中心
  銘輝毛刷有限公司
  大業國中 嘉義市 97 海洋教育計畫
  鳳凰冰涼巾公司
  進泉瓜子
  金鴻勝酒廠
  集順汽車椅套
  嘉義市97教學卓越計畫
  鉅祥工具開發有限公司
更多作品 >>
 

 

 

 

 

 

 

 

filing cabinet file cabinet 新恩嘉義神經內科 新恩嘉義神經內科 新竹室內設計 台中室內設計 台中室內設計

 

 
 
網頁設計+創意=100%網站 arrow 網頁設計教學與製作技巧 arrow css網頁設計教學製作技巧 arrow 網頁設計製作教學分享css menu橫式下拉直式多層子選單(四)   
網頁設計製作教學分享css menu橫式下拉直式多層子選單(四) E-mail
2009/04/25, 週六

網頁製作 css 橫式下拉式選單 

網頁設計製作教學分享 css menu 橫式下拉直式多層子選單(四) 

網頁設計或製作的同時,通常對於選單的顏色配置,也會使用較單一的顏色,這一個css menu 橫式下拉式選單的顏色配置就比較協調,是屬於較精緻型的配色。css選單有用圖下去配置的有用圖下去做的只要找到圖的位置,就可以更換。

top_25.jpg

 

 

 

 

 

 


 以下貼於<head>與</head>之間:

<style type="text/css">
ul.download {list-style-image:url(zip.gif);}
ul.download li {padding-left:5px; font-size:11px;}

#padding {height:50px;}

#multi-level {margin:25px 0 200px 100px;height:30px; position:relative; z-index:100;}
#multi-level .pad {float:left;}

/* The menu styling */
/* Remove the padding, margins and bullets from the lists */

.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

/* Set up the size of the list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */
.menu li.top a.top_link {display:block; float:left; height:35px;}
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;}

/* pre-load the hover images */
.menu li.p1 {width:65px; background:url(multi_level-files/home_1.gif) no-repeat;;}
.menu li.p2 {width:90px; background:url(multi_level-files/products_1.gif) no-repeat;;}
.menu li.p3 {width:88px; background:url(multi_level-files/services_1.gif) no-repeat;;}
.menu li.p4 {width:91px; background:url(multi_level-files/contacts_1.gif) no-repeat;;}
.menu li.p5 {width:72px; background:url(multi_level-files/shop_1.gif) no-repeat;;}
.menu li.p6 {width:103px; background:url(multi_level-files/privacy_1.gif) no-repeat;;}

.menu li a#home {width:65px; background:url(multi_level-files/home_0.gif) no-repeat;}
.menu li a#products {width:90px; background:url(multi_level-files/products_0.gif) no-repeat;}
.menu li a#services {width:88px; background:url(multi_level-files/services_0.gif) no-repeat;}
.menu li a#contacts {width:91px; background:url(multi_level-files/contacts_0.gif) no-repeat;}
.menu li a#shop {width:72px; background:url(multi_level-files/shop_0.gif) no-repeat;}
.menu li a#privacy {width:103px; background:url(multi_level-files/privacy_0.gif) no-repeat;}

/* Style the list OR link hover. Depends on which browser is used */

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu li a#home:hover, .menu li:hover a#home,
.menu li a#products:hover, .menu li:hover a#products,
.menu li a#services:hover, .menu li:hover a#services,
.menu li a#contacts:hover, .menu li:hover a#contacts,
.menu li a#shop:hover, .menu li:hover a#shop,
.menu li a#privacy:hover, .menu li:hover a#privacy {background:transparent;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

.menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(multi_level-files/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto;}

</style>


 以下貼於<body>與</body>之間:

<div id="wrapper">
 <div id="info">
   <div id="multi-level">
<img class="pad" src="multi_level-files/pad.gif" title="" alt="" />
<ul class="menu">
 <li class="top p1"><a href="http://www." id="home" class="top_link"><span>Home</span></a></li>
 <li class="top p2"><a href="http://www." id="products" class="top_link"><span>Products</span><!--[if IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="sub">
   <li><a href="../menu/" class="fly">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->

     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
      <li><a href="../mozilla/">Nikon</a></li>
      <li><a href="../ie/">Minolta</a></li>
      <li><a href="../opacity/">Pentax</a></li>
     </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->

   </li>
   <li class="mid"><a href="../boxes/" class="fly">Lenses<!--[if IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
      <li><a href="../mozilla/">Wide Angle</a></li>
      <li><a href="../ie/">Standard</a></li>
      <li><a href="../opacity/">Telephoto</a></li>

      <li><a href="../menu/" class="fly">Zoom<!--[if IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul>
        <li><a href="../mozilla/">35mm to 125mm</a></li>
        <li><a href="../opacity/">50mm to 250mm</a></li>
        <li><a href="../menu/">125mm to 500mm</a></li>
       </ul>

       <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </li>
      <li><a href="../boxes/">Mirror</a></li>
      <li><a href="../opacity/" class="fly">Non standard<!--[if IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul>
        <li><a href="../mozilla/">Bayonet mount</a></li>

        <li><a href="../opacity/">Screw mount</a></li>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </li>
     </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="../mozilla/">Flash Guns</a></li>

   <li><a href="../ie/">Tripods</a></li>
   <li><a href="../opacity/">Filters</a></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li class="top p3"><a href="http://www." id="services" class="top_link"><span>Services</span><!--[if IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->

  <ul class="sub">
   <li><a href="../menu/">Printing</a></li>
   <li><a href="../layouts/">Photo Framing</a></li>
   <li><a href="../boxes/">Retouching</a></li>
   <li><a href="../mozilla/">Archiving</a></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->

 </li>
 <li class="top p4"><a href="http://www." id="contacts" class="top_link"><span>Contacts</span><!--[if IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="sub">
   <li><a href="../layouts/">Support</a></li>
   <li><a href="../boxes/" class="fly">Sales<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul>
     <li><a href="../mozilla/">USA</a></li>
     <li><a href="../ie/">Canadian</a></li>
     <li><a href="../opacity/">South American</a></li>
     <li><a href="../menu/" class="fly">European<!--[if IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>

       <li><a href="../mozilla/" class="fly">British<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
         <li><a href="../ie/">London</a></li>
         <li><a href="../menu/">Liverpool</a></li>
         <li><a href="../boxes/">Glasgow</a></li>
         <li><a href="../opacity/" class="fly">Bristol<!--[if IE 7]><!--></a><!--<![endif]-->

          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul>
           <li><a href="../ie/">Redland</a></li>
           <li><a href="../opacity/">Hanham</a></li>
           <li><a href="../menu/">Eastville</a></li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->

         </li>
         <li><a href="../layouts/">Cardiff</a></li>
         <li><a href="../mozilla/">Belfast</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="../opacity/">French</a></li>

       <li><a href="../menu/">German</a></li>
       <li><a href="../boxes/">Spanish</a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a href="../boxes/">Australian</a></li>
     <li><a href="../boxes/">Asian</a></li>

    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="../mozilla/">Buying</a></li>
   <li><a href="../ie/">Photographers</a></li>
   <li><a href="../opacity/">Stockist</a></li>
   <li><a href="../menu/">General</a></li>

  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li class="top p5"><a href="http://www." id="shop" class="top_link"><span>Shop</span><!--[if IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="sub">
   <li><a href="../ie/">Online</a></li>
   <li><a href="../opacity/">Catalogue</a></li>

   <li><a href="../menu/">Mail Order</a></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li class="top p6"><a href="http://www." id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
<img class="pad" src="multi_level-files/pad.gif" title="" alt="" /></div>
 </div> <div id="info_right">
  <div class="box250"></div></div>

</div>

< 上一頁   下一頁 >
top_18.jpg
 
 
尚佶網頁設計 2011 © copyright 版權所有.All rights reserved.
 
©2011 Sungie