為什麽不要js的呢？用js不是很簡單嗎，又不會產生那麽多需要兼容的問題。jquery水平二級導航欄實例a{text-decoration: none;outline: none;cursor:pointer;color:white;}ul{ list-style: none;}ul li{float: left;margin: 0;padding:7px 7px 0px 7px;border-right:1px dotted white;height:25px;background:tomato;font-size:14px;color:white;text-align:center;}li a{display: block;}ul li span{display:none;position: absolute;z-index: 1000;background: red; color: #fff;margin-top:10px;padding: 5px; /**設置子欄絕對定位*/ width:auto;_width:100px;/**IE6下無法通過設置為auto來自適應子欄的寬度，所以做了壹個折中的設置*/-moz-border-radius-bottomright: 5px; /**為子欄增加圓角樣式，只能在Chrome和FF下顯示良好,IE下無效*/-khtml-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-khtml-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}ul li span a{color:white;display:inline;}/**使子欄水平顯示*/ul li span a:hover{color:tomato;background:white;}首頁項目壹 1.1 1.2 1.3 項目二 2.1 2.2 2.3 項目三 3.1 3.2 3.3 幫助$("ul li").hover(function() {$(this).css({ 'background' : 'red'}); $(this).find("span").show(); //顯示子欄} , function() { $(this).css({ 'background' : 'tomato'}); $(this).find("span").hide(); //隱藏子欄});效果圖如下：
上一篇:caxacam數控車2020教程下一篇:諾基亞6120c手機字典在哪裏，如何安裝？