css+div 橫向二級菜單代碼

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

css+div 橫向二級菜單代碼<style>#menuContainer {padding:0; margin:50px 0 0 0; list-style:none; width:672px; height:96px; position:relative; float:right;}#menu {padding:0; margin:0; list-style:none; width:672px; height:96px; float:right;}#menu li {float:left; width:96px; height:96px; position:relative;}#menu li a {display:block; float:left; width:96px; height:96px; cursor:pointer;}#menu li a b {display:block; width:96px; height:0; padding-top:96px; overflow:hidden; position:absolute; yun_qi_img/highlight.png); left:-9999px;}* html #menu li a b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/highlight.png', sizingMethod='scale');}#menu li#home a {yun_qi_img/home.png);}#menu li#single a {yun_qi_img/single.png);}#menu li#dropdown a {yun_qi_img/dropdown.png);}#menu li#dropline a {yun_qi_img/dropline.png);}#menu li#flyout a {yun_qi_img/flyout.png);}#menu li#support a {yun_qi_img/support.png);}#menu li#contact a {yun_qi_img/contact.png);}* html #menu li#home a {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/home.png', sizingMethod='scale');}* html #menu li#single a {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/single.png', sizingMethod='scale');}* html #menu li#dropdown a {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/dropdown.png', sizingMethod='scale');}* html #menu li#dropline a {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/dropline.png', sizingMethod='scale');}* html #menu li#flyout a {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/flyout.png', sizingMethod='scale');}* html #menu li#support a {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/support.png', sizingMethod='scale');}* html #menu li#contact a {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/demo/pic/contact.png', sizingMethod='scale');}#menu li a:hover {white-space:nowrap; position:relative;}#menu li a:hover b {left:0; top:0;}.home #menu li#home a b,.single #menu li#single a b,.dropdown #menu li#dropdown a b,.dropline #menu li#dropline a b,.flyout #menu li#flyout a b,.support #menu li#support a b,.contact #menu li#contact a b {left:0; top:0;}</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.