織夢純CSS一級欄目下拉導航菜單代碼
織夢html純CSS一級欄目下拉導航菜單,找了好久沒找到滿意的,網上的都是從以前DEDECMS5.5版本扒下來的,還要調用JS.整了半天,很多測試調用不出來,我找的這個上純CSS,不需要修改其他網站文件,現分享給大家。
效果圖:
樣式
body{ font:14px "Microsoft YaHei", Arial,Verdana,tahoma, Srial, helvetica, sans-serif; line-height:1.8; color:#333; background:#fff;} .menu {height: 40px; background: #4ba036;position: relative; z-index:999; } .menu a { text-decoration: none;display: block; padding: 0 12px; margin-right: 1px; line-height: 40px; font-size: 16px; color: #fff; } ul { margin: 0; padding: 0; } .menu li { list-style: none; float: left; width: 90px; overflow: visible; cursor: pointer; } ul.level0 { height: 40px; overflow: visible; } ul.level1, ul.level2, ul.level3 { width: 90px; display: none; } ul.level2, ul.level3 { margin: -28px 0 0 90px; } ul.level0 > li { height: 40px; line-height: 40px; text-align: center; background: #4ba036; } ul.level1 > li, ul.level2 > li, ul.level3 > li { height: 40px; line-height: 40px; background: #308a1a; } ul.level0 > li:hover { background: #308a1a; } ul.level1 > li:hover, ul.level2 > li:hover, ul.level3 > li:hover { background: #4ba036; } ul.level0 > li.imyeah:hover > ul, ul.level1 > li.imyeah:hover > ul, ul.level2 > li.imyeah:hover > ul, ul.level3 > li.imyeah:hover > ul { display: block; }
調用代碼:
<div class="menu">
<div class="bar">
<ul class="level0">
<li><a href="/">首頁</a></li>
{dede:channelartlist typeid="top" row='18' currentstyle="<li class='active'><a href='~typelink~' ~rel~><span>~typename~</span></a></li>"}
<li class="imyeah"><a href="{dede:field name="typeurl"/}" target="_blank">{dede:field name="typename"/}</a>
<ul class="level1">
{dede:channel type="son"}
<li><a href="[field:typeurl/]" title="[field:typename/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</li>
{/dede:channelartlist}
</ul>
</div>
</div>
聲明:
1.本站主要是為了記錄工作、學習中遇到的問題,可能由于本人技術有限,內容難免有紕漏,一切內容僅供參考。
2.本站部分內容來源互聯網,如果有圖片或者內容侵犯您的權益請聯系我們刪除!
3.本站所有原創(chuàng)作品,包括文字、資料、圖片、網頁格式,轉載時請標注作者與來源。
1.本站主要是為了記錄工作、學習中遇到的問題,可能由于本人技術有限,內容難免有紕漏,一切內容僅供參考。
2.本站部分內容來源互聯網,如果有圖片或者內容侵犯您的權益請聯系我們刪除!
3.本站所有原創(chuàng)作品,包括文字、資料、圖片、網頁格式,轉載時請標注作者與來源。
THE END