css實現橫向下拉導覽功能表效果代碼

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉式功能表</title><style type="text/css">*{margin:0;padding:0;}body{ font-family:微軟雅黑;width:900px;margin:50px auto;font-size:12px;}a{ color:#fff;text-decoration:none;}ul{list-style-type:none;}ul li {float:left;width:88px;height:30px;line-height:30px;background:green;border-right: 2px solid #fff;text-align:center;}ul li ul li{height:28px;background:orange; border-top:2px solid #fff;}ul li a{display:block;width:90px;height:30px;}ul li a:hover{background:#004000;}ul li ul{visibility:hidden;}ul li:hover ul{visibility:visible;}</style></head><body><ul><li>視頻</li><li>健康</li><li>房產<ul><li>廣州</li><li>北京</li><li>上海</li><li>深圳</li><li>天津</li><li>重慶</li><li>武漢</li><li>杭州</li><li>四川</li></ul></li><li>家居</li><li>教育</li><li>讀書</li><li>遊戲</li><li>彩票<ul><li>購彩大廳</li><li>合買大廳</li><li>彩票開獎</li><li>走勢圖</li><li>彩票資訊</li><li>手機購彩</li></ul></li> </ul></body></html></td> </tr></table>
提示:您可以先修改部分代碼再運行
相關文章

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.