韓國風格css橫嚮導航菜單代碼

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

韓國風格css橫嚮導航菜單代碼<style>#menu {padding:0; margin:0; list-style:none; width:546px; height:180px; background:url(yun_qi_img/bw.jpg); position:relative; float:right;}#menu li {float:left;}#menu li a {display:block; width:78px; height:100px; background:transparent;}#menu li a b {position:absolute; left:-9999px;}#menu li#home,#menu li#dropdown,#menu li#flyout,#menu li#contact{margin-top:23px;}#menu li#single,#menu li#dropline,#menu li#support{margin-top:3px;}#menu li#home a:hover {background:url(yun_qi_img/color.jpg) 0 -23px;}#menu li#single a:hover {background:url(yun_qi_img/color.jpg) -78px -3px;}#menu li#dropdown a:hover {background:url(yun_qi_img/color.jpg) -156px -23px;}#menu li#dropline a:hover {background:url(yun_qi_img/color.jpg) -234px -3px;}#menu li#flyout a:hover {background:url(yun_qi_img/color.jpg) -312px -23px;}#menu li#support a:hover {background:url(yun_qi_img/color.jpg) -390px -3px;}#menu li#contact a:hover {background:url(yun_qi_img/color.jpg) -468px -23px;}.home #menu li#home a, .home #menu li#home a:hover, #menu li#home a:active, #menu li#home a:focus {background:url(yun_qi_img/white.jpg) 0 -23px;}.single #menu li#single a, .single #menu li#single a:hover, #menu li#single a:active, #menu li#single a:focus {background:url(yun_qi_img/white.jpg) -78px -3px;}.dropdown #menu li#dropdown a, .dropdown #menu li#dropdown a:hover, #menu li#dropdown a:active, #menu li#dropdown a:focus {background:url(yun_qi_img/white.jpg) -156px -23px;}.dropline #menu li#dropline a, .dropline #menu li#dropline a:hover, #menu li#dropline a:active, #menu li#dropline a:focus {background:url(yun_qi_img/white.jpg) -234px -3px;}.flyout #menu li#flyout a, .flyout #menu li#flyout a:hover, #menu li#flyout a:active, #menu li#flyout a:focus {background:url(yun_qi_img/white.jpg) -312px -23px;}.support #menu li#support a, .support #menu li#support a:hover, #menu li#support a:active, #menu li#support a:focus {background:url(yun_qi_img/white.jpg) -390px -3px;}.contact #menu li#contact a, .contact #menu li#contact a:hover, #menu li#contact a:active, #menu li#contact a:focus {background:url(yun_qi_img/white.jpg) -468px -23px;}</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.