漂亮的css導覽功能表

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

漂亮的css導覽功能表<ul id="menu"><li id="home"><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"><b>Contact</b></li></ul><style>#pad {height:150px;}#menu {padding:0 0 0 30px; margin:0; list-style:none;}#menu li {float:left; position:relative; margin-right:2px; display:block; height:0; width:60px; border-bottom:30px solid #069; border-left:30px dashed transparent;}#menu li a {position:absolute; left:60px; top:0; border-top:30px solid #069; border-right:30px dotted transparent; text-decoration:none; font-family:arial, sans-serif; font-size:12px; color:#fff;}#menu li a b {display:block; background:#069; position:absolute; top:-30px; left:-60px; width:60px; height:30px; line-height:30px; text-align:center; cursor:pointer; font-weight:normal;}#menu li#single {width:80px;}#menu li#single a {left:80px;}#menu li#single a b {left:-80px; width:80px;}#menu li a:hover {color:#000;}.home #menu li#home,.single #menu li#single,.dropdown #menu li#dropdown,.dropline #menu li#dropline,.flyout #menu li#flyout,.support #menu li#support,.contact #menu li#contact{border-bottom-color:#e70;}.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{color:#000; border-top-color:#e70;}.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{background:#e70;}</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.