純CSS橫向二級導覽功能表代碼

來源:互聯網
上載者:User
提示:您可以先修改部分代碼再運行

純CSS橫向二級導覽功能表代碼 <style>#menuContainer {width:532px; height:180px; background:url(yun_qi_img/tshirt.png) no-repeat; float:right;}* html #menuContainer {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/tshirt.png', sizingMethod='scale');}#menu {float:left;padding:0; margin:0; list-style:none; position:relative; height:180px; width:532px; z-index:50;}#menu li {float:left; width:64px; height:64px; position:absolute;}#menu li a {display:block; width:64px; height:64px; color:#000; text-decoration:none; font-family:arial, sans-serif; font-size:12px; white-space:nowrap;}#menu li a b {position:absolute; left:-9999px;}#menu li#home {left:96px; top:32px;}#menu li#single {left:128px; top:96px;}#menu li#dropdown {left:160px; top:0;}#menu li#dropline {left:192px; top:64px;}#menu li#flyout {left:256px; top:32px;}#menu li#support {left:352px; top:64px;}#menu li#contact {left:288px; top:96px;}#menu li a:hover {cursor:pointer;}.home #menu li#home a b {left:118px; top:131px; color:#000; text-decoration:none;}.single #menu li#single a b {left:86px; top:67px; color:#000; text-decoration:none;}.dropdown #menu li#dropdown a b {left:54px; top:163px; color:#000; text-decoration:none;}.dropline #menu li#dropline a b {left:22px; top:98px; color:#000; text-decoration:none;}.flyout #menu li#flyout a b {left:-42px; top:131px; color:#000; text-decoration:none;}.support #menu li#support a b {left:-138px; top:99px; color:#000; text-decoration:none;}.contact #menu li#contact a b {left:-76px; top:67px; color:#000; text-decoration:none;}#menu li#home a:hover {background:url(yun_qi_img/homeb.png);}#menu li#single a:hover {background:url(yun_qi_img/singleb.png);}#menu li#dropdown a:hover {background:url(yun_qi_img/dropb.png);}#menu li#dropline a:hover {background:url(yun_qi_img/lineb.png);}#menu li#flyout a:hover {background:url(yun_qi_img/flyoutb.png);}#menu li#support a:hover {background:url(yun_qi_img/supportb.png);}#menu li#contact a:hover {background:url(yun_qi_img/contactb.png);}* html #menu li#home a:hover {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/homeb.png', sizingMethod='scale');}* html #menu li#single a:hover {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/singleb.png', sizingMethod='scale');}* html #menu li#dropdown a:hover {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/dropb.png', sizingMethod='scale');}* html #menu li#dropline a:hover {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/lineb.png', sizingMethod='scale');}* html #menu li#flyout a:hover {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/flyoutb.png', sizingMethod='scale');}* html #menu li#support a:hover {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/supportb.png', sizingMethod='scale');}* html #menu li#contact a:hover {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/contactb.png', sizingMethod='scale');}</style><div id="menuContainer"><ul id="menu"><li id="home" class="first"><b>Home</b></li><li id="single"><b>Single Level</b></li><li id="dropdown"><b>Dropdown</b></li><li id="dropline"><b>Dropline</b></li><li id="flyout"><b>Flyout</b></li><li id="support"><b>Support</b></li><li id="contact" class="last"><b>Contact</b></li></ul></div>
提示:您可以先修改部分代碼再運行
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.