漂亮CSS+DIV導覽功能表代碼

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

漂亮CSS+DIV導覽功能表代碼<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><style>#menu {padding:0; margin:0; list-style:none; width:700px; height:45px; position:absolute; top:150px; left:300px;}#menu li {position:relative; float:left;}#menu li a {display:block; height:45px; width:100px; padding:0; float:left; color:#fff; text-decoration:none; font-family:"trebuchet MS", sans-serif; font-size:14px; text-align:center; cursor:pointer; background: url(/blog/upload/image/20091219073159.png);}#menu li a b {position:relative; top:12px; font-weight:normal;}* html #menu li a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blog/upload/image/20091219073159.png', sizingMethod='scale');}#menu li a:hover, #menu li a:active,#menu li a:focus,.home #menu li#home a,.single #menu li#single a,.dropdown #menu li#dropdown a,.dropline #menu li#dropline a,.flyout #menu li#flyout a,.support #menu li#support a,.contact #menu li#contact a{background: url(/blog/upload/image/20091219073249.png) no-repeat right top; cursor:pointer; color:#fff;}* html #menu li a:hover, * html #menu li a:active,* html #menu li a:focus,* html .home #menu li#home a,* html .single #menu li#single a,* html .dropdown #menu li#dropdown a,* html .dropline #menu li#dropline a,* html .flyout #menu li#flyout a,* html .support #menu li#support a,* html .contact #menu li#contact a{background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blog/upload/image/20091219073249.png', sizingMethod='scale');}#menu li a:hover b,#menu li a:active b,#menu li a:focus b,.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{cursor:pointer; top:8px; padding-right:3px;}</style>
提示:您可以先修改部分代碼再運行
相關文章

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.