导航菜单（移动出现子菜单）
生活随笔
收集整理的這篇文章主要介紹了
导航菜单（移动出现子菜单）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼例如以下：
<!DOCTYPE html> <html lang="zh-CN"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta name="Keywords" content="" /><meta name="description" content="" /><style type="text/css">/* 這下面是重置樣式 Remove margin padding */body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; }/* Default Font */body,button,input,select,textarea { font:12px/1.5 \5b8b\4f53,arial,sans-serif; }h1,h2,h3,h4,h5,h6 { font-size:100%; }address,cite,dfn,em,var { font-style:normal; }code,kbd,pre,samp { font-family:courier new,courier,monospace; }small { font-size:12px; }ul,ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub { vertical-align:text-bottom; }legend { color:#000; }fieldset,img { border:0; }button,input,select,textarea{ font-size:100%; }table { border-collapse:collapse; border-spacing:0; }/* Remove Float */.clear { display:block; height:0; overflow:hidden; clear:both; }.clearfix:after { content:'\20'; display:block; height:0; clear:both; }.clearfix { *zoom:1; }/* 重置樣式結束 */</style> </head> <body style="padding-top:50px;"><style type="text/css">.nav { height:25px; font-family:"Microsoft Yahei"; }.nav ul li { position:relative; float:left; display:inline; margin-left:1px; width:100px; text-align:center; height:25px; line-height:25px; }.nav ul li a { transition:background 500ms linear; text-decoration:none; display:block; text-shadow:0px 1px 0px #000; width:100%; height:100%; text-align:center; background-color:#089478; color:#FFF; }.nav ul li a:hover, .nav ul li a.current { background-color:#076451; text-decoration:none; }.nav .sub-nav { display:none; position:absolute; top:24px; left:0px; padding-top:10px; }.nav .sub-nav li { float:none; display:block; width:100px; height:30px; line-height:30px; }.nav .sub-nav .triangle { position:absolute; left:50%; top:5px; margin-left:-3px; display:block; width:0; height:0; overflow:hidden; line-height:0; font-size:0; border-bottom:5px solid #089478; border-top:none; border-left:5px solid #FFF; border-right:5px solid #FFF; }</style><div class="nav"><ul class="clearfix"><li><a href="#">導航1</a><ul class="sub-nav"><span class="triangle"></span><li><a href="#">子導航1</a></li><li><a href="#">子導航2</a></li><li><a href="#">子導航3</a></li><li><a href="#">子導航4</a></li><li><a href="#">子導航5</a></li></ul></li><li><a href="#">導航2</a><ul class="sub-nav"><span class="triangle"></span><li><a href="#">子導航1</a></li><li><a href="#">子導航2</a></li><li><a href="#">子導航3</a></li><li><a href="#">子導航4</a></li><li><a href="#">子導航5</a></li></ul></li><li><a href="#">導航3</a><ul class="sub-nav"><span class="triangle"></span><li><a href="#">子導航1</a></li><li><a href="#">子導航2</a></li><li><a href="#">子導航3</a></li><li><a href="#">子導航4</a></li><li><a href="#">子導航5</a></li></ul></li><li><a href="#">導航4</a><ul class="sub-nav"><span class="triangle"></span><li><a href="#">子導航1</a></li><li><a href="#">子導航2</a></li><li><a href="#">子導航3</a></li><li><a href="#">子導航4</a></li><li><a href="#">子導航5</a></li></ul></li><li><a href="#">導航5</a><ul class="sub-nav"><span class="triangle"></span><li><a href="#">子導航1</a></li><li><a href="#">子導航2</a></li><li><a href="#">子導航3</a></li><li><a href="#">子導航4</a></li><li><a href="#">子導航5</a></li></ul></li></ul></div><script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript">$('.nav ul li').hover(function(){$(this).children('a').addClass('current');$(this).children('ul').stop(true,true).fadeIn(400);}, function(){$(this).children('ul').stop(true,true).fadeOut(400);$(this).children('a').removeClass('current');});</script></body> </html>
總結
以上是生活随笔為你收集整理的导航菜单（移动出现子菜单）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： #研发解决方案介绍#基于StatsD+G
- 下一篇： AppCode iOS 应用开发 开发环