超シンプルなCSSドロップダウンmenu_html/css_WEB-ITnose-htmlチュートリアル-php.cn

超シンプルなCSSドロップダウンmenu_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:26

オリジナル

937 人が閲覧しました

効果体験: 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.keleyi.com/" 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://keleyi.com/" target="_blank">柯乐义</a></li><li class="nav_menu-item"><a href="http://hovertree.com/hvtimg/" target="_blank">图片</a></li></ul></nav><!-- 代码 结束 --></body></html>

ログイン後にコピー

使用方法:

1. ヘッドエリアにスタイルシートファイルを導入します
< link href="http://hovertree.com/texiao/css/3/hovertreecss3.css" rel="stylesheet" type="text/css" />

2. 追加 -- 開始コードの終わり-->市外局番をコメントしてください

3. ul と li の入れ子関係と、第 1 レベルと第 2 レベルの選択に注意してください。メニュースタイル、つまり、必要なナビゲーションメニュー効果を作成できます。

ウェブフロントエンド: