DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 網頁特效代碼 >> 簡潔的HTML+CSS下拉菜單
簡潔的HTML+CSS下拉菜單
編輯:網頁特效代碼     

效果體驗:http://hovertree.com/texiao/css/3.htm


HTML文件代碼:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>簡潔的HTML+CSS下拉菜單-HoverTree</title><base target="_blank" />
<link href="http://hovertree.com/texiao/css/3/hovertreecss3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 代碼 開始 -->
<h1>簡潔的HTML+CSS下拉菜單</h1>
<nav class="nav">
<ul class="nav_menu">
<li class="nav_menu-item"><a href="http://hovertree.com/" target="_blank">首頁</a></li>
<li class="nav_menu-item">
<a href="http://hovertree.com/menu/css/" target="_blank">CSS</a>
<ul class="nav_submenu">
<li class="nav_submenu-item"> <a href="http://hovertree.com/menu/downjquery/" target="_blank">jQuery下載</a></li>
<li class="nav_submenu-item"> <a href="http://hovertree.com/guestbook/addmessage.aspx" target="_blank">留言</a></li>
<li class="nav_submenu-item"> <a href="http://hovertree.com/texiao/" target="_blank">特效</a></li>
</ul>
</li>
<li class="nav_menu-item">
<a href="http://hovertree.com/hvtart/bjae/48fa7b1b3162a7a4.htm" target="_blank">關於</a>
<ul class="nav_submenu">
<li class="nav_submenu-item"> <a href="http://hovertree.com/shortanswer/" target="_blank">簡答題</a></li>
<li class="nav_submenu-item"> <a href="http://tool./" target="_blank">工具</a></li>
<li class="nav_submenu-item"><a href="http://hovertree.com/menu/csharp/" target="_blank">C#</a></li>
<li class="nav_submenu-item"><a href="http://hovertree.com/hvtart/bjae/g71ha4qs.htm">原文</a></li>
</ul>
</li>
<li class="nav_menu-item"><a href="http:///" target="_blank"></a></li>
<li class="nav_menu-item"><a href="http://hovertree.com/hvtimg/" target="_blank">圖片</a></li>
</ul>
</nav>
<!-- 代碼 結束 -->

</body>
</html>



使用方法:

1、在head區域引入樣式表文件
<link href="http://hovertree.com/texiao/css/3/hovertreecss3.css" rel="stylesheet" type="text/css" />

2、在你的網頁中加入<!-- 代碼 開始 --><!-- 代碼 結束 -->注釋區域代碼即可


3、注意ul和li的嵌套關系,以及一級和二級菜單樣式的選擇,即可做出你想要的導航菜單效果。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved