二级导航菜单模板 代码与实例
网站后台管理的二级下拉导航菜单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>网站后台管理的二级下拉导航菜单</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">*{margin:0px;padding:0px;}body{width:160px;font-size:12px;text-align:left;line-height:20px;background:#799AE1;} div#nifty{margin:0 42%;background:#D6DFF7;}b.rtop,b.rbottom{display:block;background:#799ADD;}b.rtop b,b.rbottom b{display:block;height:1px;overflow:hidden; background:#D6DFF7;} b.r1{margin:0 5px;}b.r2{margin:0 3px;}b.r3{margin:0 2px;}b.rtop b.r4,b.rbottom b.r4{margin:0 1px;height:2px;}a{color:#333333;text-decoration:none;}a:hover{color:#000000;text-decoration:underline;}image{border:0px;}h2{font-size:14px;font-weight:bold;text-align:left;padding:3px5px;color:#fff;background:#799ADD;}ul{background:#F1F3F5;}li{list-style:none;text-align:left;}.menu,#left_top{width:160px;padding:1px;margin-top:5px;}.menu h2{width:158px;background:#BFDEFD;cursor:hand;color:#333;font-weight:normal;background:url(images/201008230800/h2_b g.gif);line-height:23px;padding:1px 5px;}.menu ul{background:#D6DFF7;border:1px #fff solid;display:none;}.menu h2 span{padding-top:3px;}.menu li{width:148px;padding-top:1px;padding-left:15px;background:url() no-repeat 5px 8px;} .menu a{width:100%;}.menu a:hover{text-decoration:none;background:#C7F1F1;}#left_toph2{width:158px;background:url(images/201008230800/title.gif);line-height: 30px;}#left_topul{background:url(images/201008230800/quit_bg.gif);line-height:23px;} #left_top li{width:148px;padding:1px 3px;font-weight:bold;}#left_top .pwd{float:left;width:70px;padding:2px 2px 2px 2px;}#left_top .quit{float:left;width:70px;padding:2px 2px 2px 2px;}</style><script language="javascript">function switchMenu(divTitle,obj){if(obj.style.display == "block"){obj.style.display = "none";divTitle.innerHTML = "<img src=/notfound.jpg>";}else{obj.style.display = "block";divTitle.innerHTML = "<img src=/notfound.jpg>";}}</script></head><body><!--把下面代码加到<body>与</body>之间--><div id="nifty"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><div id="left_top"><h2> </h2><ul><li> 功能列表</li></ul></div><div class="menu"><h2 onClick="switchMenu(SiteTitle,SiteMenu)"><span id="SiteTitle" style="float:left;"><img src="/notfound.jpg"></span>水费管理</h2> <ul id="SiteMenu"><li><a href="#">项目一</a></li><li><a href="#">项目二</a></li><li><a href="#">项目三</a></li><li><a href="#">项目四</a></li></ul></div><div class="menu"><h2 onClick="switchMenu(MemberCTitle,MemberCMenu)"><span id="MemberCTitle" style="float:left;"><img src="/notfound.jpg"></span>电费管理</h2><ul id="MemberCMenu"><li><a href="#">项目一</a></li><li><a href="#">项目二</a></li><li><a href="#">项目三</a></li><li><a href="#">项目四</a></li></ul></div><div class="menu"><h2 onClick="switchMenu(copyrightTitle,copyright)"><span id="copyrightTitle" style="float:left;"><img src="/notfound.jpg"></span>版权信息</h2> <ul id="copyright" style="display:block;"><li><img src="/notfound.jpg">开发：瑞城工作室</li><li> QQ:151290938</li></ul></div><b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></body></html>更多详细内容请查看：/js_a/javascript-dh/34703.htm。
htmlcss二级导航栏
htmlcss⼆级导航栏⼆级导航栏制作：1.将⼀级导航栏去除列表样式（list-style:none），并给予浮动，使其横向排列（float:left）2.给每个li中添加⼀个<a></a>标签，给a设置样式,使其成为块级元素( display:block)，这样只需要点击当前 li 范围区域即可触发a的跳转3.给需要添加⼆级导航栏的li⾥⾯添加 ul>li ,给个类名，设置其样式为（display:none），使其在普通情况下隐藏4.设置⼀级导航栏划过效果，当滑到有⼆级导航栏的 li 时，设置⼆级导航栏状态为（display:block）,即为显⽰状态<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- <link rel="stylesheet" href="./../common/common.css"> --><title>Document</title><style>*{margin: 0;padding: 0;}ul,li{list-style: none;}.one{width: 600px;background-color: coral;height: 30px;margin: 0 auto;}.one li{float: left;width: 100px;text-align: center;line-height: 30px;}.one li:hover{background-color: #fff;color: coral;}.one .two{display: none;}.one li:hover .two{display: block;}.one .two li{background-color: cadetblue;}.one .two li:hover{background-color: honeydew;}a{display: block;text-decoration: none;}</style></head><body><ul class="one"><li><a href="">⼀级</a> </li><li><a href="">⼀级</a> </li><li><a href="">⼀级</a><ul class="two"><li><a href="">⼆级</a> </li><li><a href="">⼆级</a> </li><li><a href="">⼆级</a> </li></ul></li><li><a href="">⼀级</a> </li><li><a href="">⼀级</a> </li><li><a href="">⼀级</a> </li></ul></body> </html> 。
二级导航代码
</tbody></table>
</div>
</div>
<td width="220" style="padding-left:10px;"><a href="" target="_blank">求职</a> | <a href="" target="_blank">兼职</a> | <a href="" target="_blank">二手</a> | <a href="/" target="_blank">团购</a> | <a href="" target="_blank">打折</a></td>
<td width="130" align="center" style="padding-left:6px;"><a href="/tv.php">电视</a> | <a href="/">电台</a> | <a href="/music.php">音乐</a></td>
<td width="29" rowspan="2"><img src="template/loolgeV8/image/daohang_bm.gif" width="29" height="47"></td>
CSS3二级导航菜单制作步骤详解
动画定义好后，可以挺直将动画样式引用到 ul.submenu 上，注重，假 如用法的是 animate.css，那么上述步骤将省略，挺直用其提供好的 动画样式即可。
小程序 微信 企业站
第 9 页 共 10 页
本文转载自中文网
第 10 页 共 10 页
CSS3 二级导航菜单制作步骤详解
假如想要实现网页的二级导航，我们可以用法 JS 技术，动态的显示和 躲藏二级菜单，固然也可以用法 CSS 技术来实现。并且这里推举用法 CSS，由于其效率更高，更流畅。这里将介绍二级菜单的动态显示与躲 藏。 1 结构 普通导航的主体我们主要是用法 ulli 标签
首页
background-color:ededed;
body{margin:0;font-size:14px;color:666}
}
ul,ol{margin:0;padding:0;list-style:none;}
/*一级导航浮动*/
a{text-decoration:none;color:666;}
ul.menu::after{
/*一级导航*/
content:&39;&39;;
第 4 页 共 10 页
display:block; clear:both; } ul.menu>li{ float:left; width:120px; line-height:3em;
height:3em; text-align:center; cursor:pointer; } /*二级导航项分割线*/ ul.submenu{ /*默认躲藏*/
第 5 页 共 10 页
display:none; } ul.submenu>li{ border-bottom:1pxsolidfff; } /*内容区*/ .content{
简单三部实现导航分类二级菜单
1.在page_header.lbi对应的位置（你想显示导航的位置）插入(注意下面的"themes/模板名称/util.php"中的"模板名称"改成你模板文件夹的名称)<?phprequire_once("themes/模板名称/util.php");?><div class="header-menu"><p {if $navigator_list.config.index eq 1} class="cur" {/if}><a href="../index.php">{$lang.home}</a></p><ul><!-- {foreach name=nav_middle_listfrom=$navigator_list.middle item=nav} --><li onMouseOver="sw_nav(this,1);"onMouseOut="sw_nav(this,0);" {if $nav.active eq 1} class="curs"{/if}> <a href="{$nav.url}" {if $nav.opennew eq1}target="_blank" {/if}>{$}</a><?php$subcates =get_subcate_byurl($GLOBALS['smarty']->_var['nav']['url']);if($subcates!=false){if(count($subcates)>0){echo "<div class='sub_nav'>";if($subcates){foreach($subcates as $cate){echo "<ahref='".$cate['url']."' class='level_1'>".$cate['name']."</a>";}}echo "</div><iframe frameborder='0' scrolling='no' class='nomask'></iframe>";}}?></li><!-- {/foreach} --></ul><script type="text/javascript">//初始化主菜单function sw_nav(obj,tag){var subdivs = obj.getElementsByTagName("DIV"); var ifs = obj.getElementsByTagName("IFRAME");if(subdivs.length>0){if(tag==1){subdivs[0].style.display = "block";ifs[0].style.display = "block"; }else{subdivs[0].style.display = "none";ifs[0].style.display = "none"; }}}</script></div>2.在CSS文件中插入.header-menu p{ float:left;padding:1px 12px 1px 0;margin-top:-2px;}.header-menu ul li{float:left;padding:1px 12px 1px12px;margin-top:-2px;}.header-menu ul li a,.header-menu p a{color: #333;display:block;}.header-menu ul li a:hover,.header-menu p a:hover{color:#888;}.header-menu ul li.curs{background:#999;}.header-menu ul li.curs a{color:#fff;}.sub_nav{ background:#999;width:110px; position:absolute; z-index:5003; display:none;margin-left:-12px;}.nomask{ background:#fff; width:110px; height:50px; position:absolute;z-index:5002;display:none;margin-left:-12px;}.sub_nav a.level_1{ display:block;color:#fff;padding:6px 6px 6px13px;font:11px Tahoma,Verdana,PMingLiU,Arial;border-bottom:1px dotted #D1D1D1;*border-bottom:1px dotted#D1D1D1 !important;*border-bottom:1px solid #A8A8A8;}.sub_nava.level_1:hover{color:#fff;background:#55B46C;text-decoration:none;}OK,搞定效果(具体样式可根据自己的模板需求修改CSS部分)：。
一款纯css3实现的竖形二级导航的实例教程
⼀款纯css3实现的竖形⼆级导航的实例教程 之前为⼤家分享了好多导航菜单。
今天给⼤家带来⼀款纯css3实现的竖形⼆级导航。
这款导航菜单可以是⽆限级。
⼀起看下效果图： 实现的代码。
html代码：XML/HTML Code复制内容到剪贴板1. <div style="width: 700px; margin: auto;">2. <div class="W1-h16">3. <ul>4. <li class="has-sub"><a href="#">Menu 1</a>5. <ul>6. <li class="has-sub"><a href="#">Submenu 1.1</a>7. <ul>8. <li><a href="#">Submenu 1.1.1</a></li>9. <li class="has-sub"><a href="#">Submenu 1.1.2</a>10. <ul>11. <li><a href="#">Submenu 1.1.2.1</a></li>12. <li><a href="#">Submenu 1.1.2.2</a></li>13. </ul>14. </li>15. </ul>16. </li>17. <li><a href="#">Submenu 1.2</a></li>18. </ul>19. </li>20. <li class="has-sub"><a href="#">Menu 2</a>21. <ul>22. <li><a href="#">Submenu 2.1</a></li>23. <li><a href="#">Submenu 2.2</a></li>24. </ul>25. </li>26. <li class="has-sub"><a href="#">Menu 3</a>27. <ul>28. <li><a href="#">Submenu 3.1</a></li>29. <li><a href="#">Submenu 3.2</a></li>30. </ul>31. </li>32. </ul>33. </div>34. </div> css3代码：CSS Code复制内容到剪贴板1. .W1-h16 {2. padding: 0;3. margin: 0;4. border: 0;5. line-height: 1;6. }7. .W1-h16 ul,8. .W1-h16 ul li,9. .W1-h16 ul ul {10. list-style: none;11. margin: 0;12. padding: 0;13. }14. .W1-h16 ul {15. position: relative;16. z-index: 500;17. float: left;18. }19. .W1-h16 ul li {20. float: left;21. min-height: 0.05em;22. line-height: 1em;23. vertical-align: middle;24. position: relative;25. }26. .W1-h16 ul li.hover,27. .W1-h16 ul li:hover {28. position: relative;29. z-index: 510;30. cursor: default;31. }32. .W1-h16 ul ul {33. visibility: hidden;34. position: absolute;35. top: 100%;36. left: 0px;37. z-index: 520;38. width: 100%;39. }40. .W1-h16 ul ul li {41. float: none;42. }43. .W1-h16 ul ul ul {44. top: 0;45. rightright: 0;46. }47. .W1-h16 ul li:hover > ul {48. visibility: visible;49. }50. .W1-h16 ul ul {51. top: 0;52. left: 99%;53. }54. .W1-h16 ul li {55. float: none;56. }57. .W1-h16 ul ul {58. margin-top: 0.05em;59. }60. .W1-h16 {61. width: 13em;62. background: #333333;63. font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;64. zoom: 1;65. }66. .W1-h16:before {67. content: '';68. display: block;69. }70. .W1-h16:after {71. content: '';72. display: table;73. clear: both;74. }75. .W1-h16 a {76. display: block;77. padding: 1em 1.3em;78. color: #ffffff;79. text-decoration: none;80. text-transform: uppercase;81. }82. .W1-h16 > ul {83. width: 13em;84. }85. .W1-h16 ul ul {86. width: 13em;87. }88. .W1-h16 > ul > li > a {89. border-right: 0.3em solid #1b9bff;90. color: #ffffff;91. }92. .W1-h16 > ul > li > a:hover {93. color: #ffffff;94. }95. .W1-h16 > ul > li a:hover,96. .W1-h16 > ul > li:hover a {97. background: #1b9bff;98. }99. .W1-h16 li {100. position: relative;101. }102. .W1-h16 ul li.has-sub > a:after { 103. content: '»';104. position: absolute;105. rightright: 1em;106. }107. .W1-h16 ul ul li.first {108. -webkit-border-radius: 0 3px 0 0; 109. -moz-border-radius: 0 3px 0 0; 110. border-radius: 0 3px 0 0;111. }112. .W1-h16 ul ul st {113. -webkit-border-radius: 0 0 3px 0; 114. -moz-border-radius: 0 0 3px 0; 115. border-radius: 0 0 3px 0;116. border-bottom: 0;117. }118. .W1-h16 ul ul {119. -webkit-border-radius: 0 3px 3px 0; 120. -moz-border-radius: 0 3px 3px 0; 121. border-radius: 0 3px 3px 0; 122. }123. .W1-h16 ul ul {124. border: 1px solid #0082e7; 125. }126. .W1-h16 ul ul a {127. color: #ffffff;128. }129. .W1-h16 ul ul a:hover {130. color: #ffffff;131. }132. .W1-h16 ul ul li {133. border-bottom: 1px solid #0082e7; 134. }135. .W1-h16 ul ul li:hover > a {136. background: #4eb1ff;137. color: #ffffff;138. }139. .W1-h16.align-rightright > ul > li > a {140. border-left: 0.3em solid #1b9bff;141. border-right: none;142. }143. .W1-h16.align-rightright {144. float: rightright;145. }146. .W1-h16.align-rightright li {147. text-align: rightright;148. }149. .W1-h16.align-rightright ul li.has-sub > a:before { 150. content: '+';151. position: absolute;152. top: 50%;153. left: 15px;154. margin-top: -6px;155. }156. .W1-h16.align-rightright ul li.has-sub > a:after { 157. content: none;158. }159. .W1-h16.align-rightright ul ul {160. visibility: hidden;161. position: absolute;162. top: 0;163. left: -100%;164. z-index: 598;165. width: 100%;166. }167. .W1-h16.align-rightright ul ul li.first {168. -webkit-border-radius: 3px 0 0 0;169. -moz-border-radius: 3px 0 0 0;170. border-radius: 3px 0 0 0;171. }172. .W1-h16.align-rightright ul ul st {173. -webkit-border-radius: 0 0 0 3px;174. -moz-border-radius: 0 0 0 3px;175. border-radius: 0 0 0 3px;176. }177. .W1-h16.align-rightright ul ul {178. -webkit-border-radius: 3px 0 0 3px;179. -moz-border-radius: 3px 0 0 3px;180. border-radius: 3px 0 0 3px;181. }。
html导航制作(二级下拉菜单)
Html导航菜单的制作效果图：源代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>博研图书馆</title><style>#top{background-image:url(Images/top_bg.gif);//此处放置你所需的图片背景background-repeat:no-repeat;height:118px;width:778px;}#message{height:30px;width:150px;padding-left:240px;padding-top:85px;color:#CC0000;}#daoh{background-color:#CC9933;height:20px;width:778px;}#date{background-color:#CCCC00;height:20px;width:240px;float:left;padding:0px;font-size:10px;font-weight:bold;color:#FFF;}#menu{height:20px;width:538px;float:right}.box{ padding:0px;font-size:10px; }.box ul{margin:0px; padding:0px; list-style:none;}.box ul li{margin:0px 2px 0px 0px; padding:0px; width:63px; height:20px; display:in line; float:left; border-bottom-style:none solid none none;}.box ul li:hover ul{visibility:visible;}//当鼠标移动到菜单时，下拉列表显示出来.box ul li a{text-align:center; width:80px; height:20px; line-height:15px; display:block; text-decoration:none; color:#FFF;}.box ul li ul{visibility:hidden;}//下拉菜单默认设置为隐藏.box ul li ul li{ padding:0px; width:80px; background-color:#CC9933;}.box ul li ul li:hover{background:#666;}body li{color:#FFF;}strong{color:#FFFFFF;}</style><script type="text/javascript">var timenow;var s;function jialing(s){//当获取的时间值小于10时，加一个0，如9显示为09 if(s<10){s="0"+s;return s;}else{return s;}}function showTime(){var date=new Date();//获取系统当前时间var second=date.getSeconds();var month=date.getMonth()+1;var da=date.getDate();var hour=date.getHours();var minute=date.getMinutes();second=jialing(second);minute=jialing(minute);hour=jialing(hour);da=jialing(hour);month=jialing(month);var weekday=new Array(7);weekday[0]="星期日";weekday[1]="星期一";weekday[2]="星期二";weekday[3]="星期三";weekday[4]="星期四";weekday[5]="星期五";weekday[6]="星期六";var strDate = date.getFullY ear()+'年'+month+'月'+da+'日'+weekday[date.getDay()]+hour+':'+minute+':'+second;var span = document.getElementById('showDate');span.innerHTML = strDate;timerId = setTimeout('showTime()',1000);//每1秒自动刷新一次，时间显示为按秒跳动}function winclose(){if(confirm("确定退出？")){//弹出对话框，询问是否删除。
CSS导航菜单（二级菜单）
CSS导航菜单（⼆级菜单）index.html<div class="nav"><ul><li><a href="#">Java</a><ul class="subnav"><li><a href="#">Java⼊门</a></li><li><a href="#">Java中级</a></li><li><a href="#">Java⾼级</a></li></ul></li><li><a href="#">C#</a><ul class="subnav"><li><a href="#">C#⼊门</a></li><li><a href="#">C#中级</a></li><li><a href="#">C#⾼级</a></li></ul></li><li><a href="#">Python</a><ul class="subnav"><li><a href="#">Python⼊门</a></li><li><a href="#">Python中级</a></li><li><a href="#">Python⾼级</a></li></ul></li><li><a href="#">Go</a></li><li><a href="#">Delphi</a></li></ul></div>style.scss只将跟⼆级菜单相关的写了注释.nav {height: 40px;width: 420px;border-radius: 5px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);ul {li {display: inline-block;list-style: none;//⼆级菜单相对位置position: relative;//⼆级菜单的hover事件⼀定要写在⽗元素才起作⽤&:hover .subnav {display: block;}a {display: inline-block;height: 40px;width: 60px;text-align: center;text-decoration: none;color: #333;line-height: 40px;transition: background-color linear 0.2s;&:hover {background-color: royalblue;color: #fff;}}.subnav {//取消显⽰display: none;//菜单宽度width: 150px;//显⽰⽅式：绝对定位position: absolute;//距离顶部距离，因为相对定位设置的为li元素，所以设置为菜单⾼度top: 40px;//相对定位的左边距离left: 0;//padding设置为0 不然左边会有⼀段距离padding: 0;//菜单背景颜⾊background-color: #fff;//菜单阴影box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); //菜单圆⾓border-radius: 0 0 5px 5px;//⿏标放上去背景颜⾊圆⾓部分隐藏overflow: hidden;//防⽌被其他元素挡住z-index: 1;li {list-style: none;a {//显⽰为块状元素display: block;//导航宽度width: 140px;//⽂字对齐⽅式text-align: left;//增加左距padding-left: 10px;//⿏标放上去的背景颜⾊&:hover {background-color: royalblue;}}}}}}}。
HTML+CSS实现导航栏二级下拉菜单完整代码
HTML+CSS实现导航栏⼆级下拉菜单完整代码⼯具是vs code代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>li{list-style-type: none;}#menu {width: 370px;margin: 30px auto 0px;height: 45px;background-color: #030e11;}#menu li{float: left;width: 92px;line-height:39px;text-align: center;position:relative;border:none;}#menu li a {font-size:16px; color: #e6f8e9;display:block;outline:0;text-decoration:none;}#menu li:hover a {color: #ff0000; /*导航栏⽂字颜⾊ */}#menu li:hover .dropdown_1column {left:0px;top:38px;}.dropdown_1column{ /* 下拉菜单边框颜⾊*/margin: 0px auto;float: left;position: absolute;left: -999em;text-align: left;border: 1px solid #066591;border-top: none;background: #F4F4F4;width: 140px;}#menu li:hover div a { /* 下拉菜单⽂字颜⾊*/font-size:12px;color:#444;}#menu li:hover div a:hover{color:#21910e;} /*下拉带单⿏标停留颜⾊*/#menu li ul {list-style:none;padding:10px 5px;margin:0;}#menu li ul li {font-size:12px;line-height:26px;position:relative;padding:0;margin:0;float:none;text-align:left;width:130px;}#menu li ul li:hover {background:none;border:none;padding:0;margin:0;}</style></head><body><div id="menu"><ul><li> <a href="" class="nodrop">⾸页</a></li><li><a href="" class="drop">最⽕下载站</a><div class="dropdown_1column"><div class="col_1"><ul class="simple"><li><a href="">⽹站建设</a></li><li><a href="">导航条代码</a></li><li><a href="">电⼦商务</a></li></ul></div></div></li><li><a href="" class="nodrop">联系我们</a></li></ul></div></body></html>3.CSS + ul li 去掉列表项前⾯的标记类型例如：ul.circle {list-style-type:none;}ul.circle {list-style-type:circle;}ul.square {list-style-type:square;}ol.upper-roman {list-style-type:upper-roman;}ol.lower-alpha {list-style-type:lower-alpha;}4.CSS + ul li 竖着排列转成横向排列⽅法5. 块级元素，背景⾊设置6.⿏标放上去⼩⼿形状，字体颜⾊变化7.⼆级菜单出现位置，⼆级菜单边框，⿏标放到⼆级菜单上，字体颜⾊变化。
垂直二级导航菜单用div+CSS架构实例
垂直二级导航菜单用div+CSS架构实例导航的结构导航的本质是让浏览者更好的访问你的网站,所以要建立有意义的语义.使CSS和语义相符合,为了以后方便维护，注意要避免现有浏览器的不兼容。
解决方案下面是导航的HTML和CSS的代码,效果如图.这是创建导航的HTML代码=========================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" lang="en-US"><head><title>Lists as navigation</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="listnav1.css" /></head><body><div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div></body></html>============================使用CSS给上面代码添加效果=====================#navigation {width: 200px;}#navigation ul {list-style: none;margin: 0;padding: 0;}#navigation li {border-bottom: 1px solid #ED9F9F;}#navigation li a:link, #navigation li a:visited { font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}======================分析:先创建一个无序列表的导航条,并做好导航链接. ========================<ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul>========================然后用一个div把这个无序列表包含起来.===========================<div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div>==============================在浏览器中显示默认的样式.接下来我们要做的第一件事是给这个div定义宽度. ===================#navigation {width: 200px;}=====================给列表添加样式,去掉默认的圆点和清除填充.========================#navigation ul {list-style: none;margin: 0;padding: 0;}========================在浏览器中显示:给li标签添加一个下划线==========================#navigation li {border-bottom: 1px solid #ED9F9F;}==============================给链接添加样式:===============================#navigation li a:link, #navigation li a:visited { font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515; background-color: #B51032;color: #FFFFFF;text-decoration: none;}=============================在上面可以看到这个CSS是添加了左右边框,并且使对象块状,这样做的效果使链接看起来像一个按扭.这种效果看起来像是给导航添加一个图片似的.使用CSS创建一个没有图像和javascript的导航导航功能常常具有翻转的效果:比如说一个浏览者把鼠标放在按扭上,按扭就会显示出另一张图片,来突出效果.要实现这个效果,则要两张图像和javascript.解决方案：使用CSS来创建上面的那个效果比用图像来创建要简单的多.在CSS要现实翻转这个效果用到hover伪类选择器。
二级导航菜单模板 代码与实例
二级导航菜单网站建站实现效果如下：一、新建导航菜单1、列表如下：2、在环境下，代码如下：<%@Page Language="C#"AutoEventWireup="true"CodeFile="二级菜单模板.aspx.cs"Inherits="二级菜单模板" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title></head><body><form id="form1"runat="server"><div><ul><li><a href="#"title="首页">首页</a></li><li><a href="#"title="导航栏一">导航栏一</a><ul><li><a href="#"title="导一*菜单栏一">导一*菜单栏一</a></li><li><a href="#"title="导一*菜单栏二">导一*菜单栏二</a></li><li><a href="#"title="导一*菜单栏三">导一*菜单栏三</a></li><li><a href="#"title="导一*菜单栏四">导一*菜单栏四</a></li></ul></li><li><a href="#"title="导航栏二">导航栏二</a><ul><li><a href="#"title="导二*菜单栏一">导二*菜单栏一</a></li><li><a href="#"title="导二*菜单栏二">导二*菜单栏二</a></li><li><a href="#"title="导二*菜单栏三">导二*菜单栏三</a></li><li><a href="#"title="导二*菜单栏四">导二*菜单栏四</a></li></ul></li><li><a href="#"title="导航栏三">导航栏三</a><ul><li><a href="#"title="导三*菜单栏一">导三*菜单栏一</a></li><li><a href="#"title="导三*菜单栏二">导三*菜单栏二</a></li><li><a href="#"title="导三*菜单栏三">导三*菜单栏三</a></li><li><a href="#"title="导三*菜单栏四">导三*菜单栏四</a></li></ul></li><li><a href="#"title="导航栏四">导航栏四</a><ul><li><a href="#"title="导四*菜单栏一">导四*菜单栏一</a></li><li><a href="#"title="导四*菜单栏二">导四*菜单栏二</a></li><li><a href="#"title="导四*菜单栏三">导四*菜单栏三</a></li><li><a href="#"title="导四*菜单栏四">导四*菜单栏四</a></li> </ul></li><li><a href="#"title="导航栏五">导航栏五</a><ul><li><a href="#"title="导五*菜单栏一">导五*菜单栏一</a></li><li><a href="#"title="导五*菜单栏二">导五*菜单栏二</a></li><li><a href="#"title="导五*菜单栏三">导五*菜单栏三</a></li><li><a href="#"title="导五*菜单栏四">导五*菜单栏四</a></li> </ul></li><li><a href="#"title="导航栏六">导航栏六</a><ul><li><a href="#"title="导六*菜单栏一">导六*菜单栏一</a></li><li><a href="#"title="导六*菜单栏二">导六*菜单栏二</a></li><li><a href="#"title="导六*菜单栏三">导六*菜单栏三</a></li><li><a href="#"title="导六*菜单栏四">导六*菜单栏四</a></li> </ul></li></ul></div></form></body></html>二、添加样式。
二级导航代码_二级菜单特效代码_flash二级导航代码
<style>.comiis_nav{BACKGROUND:#f7f9fburl(//adplanner/dh/comiis_navbg.jpg) repeat-x;border:1px solid #e2eaf1;border-top:0px solid #e2eaf1;HEIGHT:57px;overflow:hidden;padding-left:10px;}.comiis_navdt{WIDTH:207px;HEIGHT:50px;FLOAT:left;overflow:hidden;padding-left:48px;padding-top:6p x;}.comiis_nav dt LI{LINE-HEIGHT:22px;WIDTH:65px;FLOAT:left;HEIGHT:22px;overflow:hidden;}.comiis_na v dt LI a{color:#555;}.comiis_nav dt LI a:hover{color:#369;}.nav_ico01{BACKGROUND:url(//adplanner/dh/nav_ico01.jpg)no-repeat;}.nav_ico02{BACKGROUND:url(//adplanner/dh/nav_ico02.jpg)no-repeat;}.nav_ico03{BACKGROUND:url(//adplanner/dh/nav_ico03.jpg)no-repeat;}.nav_ico04{BACKGROUND:url(//adplanner/dh/nav_ico04.jpg)no-repeat;}.nav_ico05{BACKGROUND:url(/comiis_bato/nav_ico05.jpg)no-repeat;}.STYLE1 {color: #FF0000}</style><div class="comiis_nav"><dt class="nav_ico01"><li><A href="/forum-37-1.html" target=_blank>今日SEO</A></li> <li><A href="/forum-75-1.html" target=_blank>每天一贴</A></li> <li><A href="/forum-37-1.html" target=_blank>SEO优化</A></li><li><A href="/forum-76-1.html" target=_blank>SEO技术</A></li> <li><A href="/" target=_blank>SEO新闻</A></li><li><A href="/forum-77-1.html" target=_blank>站长交友</A></li> </dt><dt class="nav_ico02"><li><A href="/forum-74-1.html" target=_blank>站长交易</A></li> <li><A href="/forum-59-1.html" target=_blank>广告外链</A></li> <li><A href="/forum-58-1.html" target=_blank>友情交换</A></li> <li><A href="/forum-87-1.html" target=_blank>域名空间</A></li><li><A href="/forum-81-1.html" target=_blank>百度SEO</A></li> <li><A href="/forum-82-1.html" target=_blank>Google优化</A></li> </dt><dt class="nav_ico03"><li><A href="/forum-84-1.html" target=_blank>SEO分享</A></li> <li><A href="/forum-64-1.html" target=_blank>接单服务</A></li> <li><A href="/forum-73-1.html" target=_blank>源码下载</A></li> <li><A href="/forum-63-1.html" target=_blank>投诉建议</A></li> <li><a href="/forum-93-1.html" style="color:red;"target="_blank">问答互刷</a></li><li><A href="/forum-76-1.html" target=_blank>程序技术</A></li> </dt><dt class="nav_ico04" style="width:130px;"><li><A href="#" target=_blank>论坛微博</A></li><li><A href="#" target=_blank>个人中心</A></li><li><A href="/forum-62-1.html" target=_blank>社区公告</A></li> <li><A href="/forum-62-1.html" target=_blank>论坛活动</A></li> </dt></DIV>。
js实现横向伸展开的二级导航菜单代码
js实现横向伸展开的⼆级导航菜单代码本⽂实例讲述了js实现横向伸展开的⼆级导航菜单代码。
分享给⼤家供⼤家参考。
具体如下：这是⼀款js实现的横向伸展开⼆级导航菜单，⿏标放在⼀级菜单的第四个菜单项上，就能展开⼆级的菜单，菜单没有过多美化，只是⼀般的修饰，使⽤的朋友可根据您⾃⼰的⽹站风格重新美化菜单风格。
运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>横向伸展开来的⼆级导航菜单</title><style type="text/css">.suckerdiv { }.suckerdiv ul { width: 120px; position: relative; }.suckerdiv ul li ul { left: 120px; /* Parent menu width - 1*/ position: absolute; width: 140px; /*sub menu width*/ top: 0; display: none; }/*All subsequent sub menu levels offset */.suckerdiv ul li ul li ul { left: 159px; /* Parent menu width - 1*/ }/* menu links style */.suckerdiv ul li a { display: block; color: #353302; text-decoration: none; font:12px 宋体; background: #eee; line-height:24px; padding: 0px 10px; border: 1px solid #fff; border-bottom: 0; } .suckerdiv ul li a:visited { color: black; }.suckerdiv ul li a:hover{ color: white; background-color: #97c839; }.suckerdiv .subfolderstyle { }.suckerdiv a.subfolderstyle:hover { background: #97c839 url() no-repeat center right; }</style></head><body><script type="text/javascript">var menuids = ["suckertree1"]function buildsubmenus() {for (var i = 0; i < menuids.length; i++) {var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")for (var t = 0; t < ultags.length; t++) {ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle"ultags[t].parentNode.onmouseover = function () {this.getElementsByTagName("ul")[0].style.display = "block";this.firstChild.style.backgroundColor = 'green';}ultags[t].parentNode.onmouseout = function () {this.getElementsByTagName("ul")[0].style.display = "none"this.firstChild.style.backgroundColor = '';}}}}if (window.addEventListener)window.addEventListener("load", buildsubmenus, false)else if (window.attachEvent)window.attachEvent("onload", buildsubmenus)</script><div class="suckerdiv"><ul id="suckertree1"><li><a href="#">腾讯新闻</a></li><li><a href="#">腾讯汽车</a></li><li><a href="#">腾讯科技</a></li><li><a href="#">腾讯⼿机</a><ul><li><a href="#">HTC</a></li><li><a href="#">联想</a></li><li><a href="#">华为</a></li><li><a href="#">中兴</a></li></ul></li></ul></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。
二级导航菜单
<table width="761" height="20" border="0" cellpadding="0" cellpadding="0"><tr><td width="67" align="center"><a href="index.php">首 页</a></td><td width="75" align="center"><a href="#" onMouseMove="Lmenu('新品')">新货上架</a></td><td width="75" align="center"><a href="#" onMouseMove="Lmenu('购物')">购物车</a></td> <td width="74" align="center"><a href="#" onMouseMove="Lmenu('会员')">会员中心</a></td><td width="61" align="center"><a href="index.php">在线帮助</a></td></tr></table><script language="javascript">function Lmenu(value){switch(value){case "新品":submenu.innerHTML="<a href='#'>商品展示</a>|<a href='#'>销售排行榜</a>|<a href='#'>商品查询</a>";break;case "购物":submenu.innerHTML="<a herf='#'>添加商品</a>|<a herf='#'>移出指定商品</a>|<a href='#'>清空购物车</a>|<a href='#'>查询购物车</a>|<a href='#'>填写订单信息</a>";break;case "会员":submenu.innerHTML="<a href='#'>注册会员</a>|<a href='#'>修改会员</a>|<a href='#'>账户查询</a>";break;}}</script><div id="submenu" class="word_yellow"> </div>。
通用的二级菜单代码（css+javascript）
通⽤的⼆级菜单代码（css+javascript）]但在《CSS⼆级菜单》中，如果⼀级菜单中的超链接是#，那么只要单击该⼀级菜单，那么与这个⼀级菜单对应的⼆级菜单就会⼀直显⽰在⽹页中，不能隐藏，是⼀个⼩⼩的bug。
后来仔细的想了⼀想，其实，⽆论是什么样的⼆级菜单，原理都是⼀样的：1、每⼀个⼀级菜单都会对应⼀个层，⽽这个层⾥放着的就是该⼀级菜单对应的⼆级菜单。
2、默认情况下，⼆级菜单这个层是隐藏的，在CSS中将层的display属性值设为none，可以达到这⼀⽬的。
3、当⿏标放在⼀级菜单上时，将对应的⼆级菜单层显⽰出来，在CSS中将层的display属性值设为block，可以达到这⼀⽬的。
4、当⿏标从⼀级菜单中移开时，对应的⼆级菜单层隐藏。
5、当然，如果⿏标从⼀级菜单移到⼆级菜单上时，⼆级菜单也不能隐藏，因此，对⼆级菜单⽽⾔，也必须将其设为，当⿏标在其上时显⽰当前层，当⿏标移开时隐藏当前层。
好了，有了基本思路之后，我们就可以开始动⼿创建⼆级菜单了。
⾸先，创建⼀个层，这个层⽤于包含所有的⼀级菜单和⼆级菜单。
之所以要创建这个层，是为了可以⽅便地对整个菜单进⾏设置，⽐较说让菜单层中显⽰，或让菜单居右显⽰等等，代码如下所⽰：复制代码代码如下:<div id="menu"></div>然后，在menu层⾥添加⼀级菜单，这个⼀级菜单可以是直接的超链接，也可以是span或div。
也许有⼈要问，⼀级菜单不就是超链接吗？的确可以这么说，但是你也同样可以将超链接作⽤在span或div上，⽽使⽤span或div还有⼀个好处，这个好处在后⾯再说，在这⾥，我们还是简单地添加⼏个超链接吧。
复制代码代码如下:<div id="menu"><a href="#">菜单⼀</a> | <a href="#">菜单⼆</a> | </div>第三步，在menu层⾥添加⼆级菜单层，如下所⽰。
二级菜单实现范文
二级菜单实现范文二级菜单是指在主菜单的基础上，再添加一个下级菜单。
二级菜单的实现可以通过多种方式完成，包括使用编程语言、使用网页设计工具等。
以下是一种使用HTML和CSS实现二级菜单的简单示例。
```html<nav><ul><li><a href="#">主菜单1</a><ul><li><a href="#">二级菜单1</a></li><li><a href="#">二级菜单2</a></li><li><a href="#">二级菜单3</a></li></ul></li><li><a href="#">主菜单2</a><ul><li><a href="#">二级菜单1</a></li><li><a href="#">二级菜单2</a></li></ul></li><li><a href="#">主菜单3</a><ul><li><a href="#">二级菜单1</a></li><li><a href="#">二级菜单2</a></li><li><a href="#">二级菜单3</a></li><li><a href="#">二级菜单4</a></li></ul></li></ul></nav>```在CSS中，可以使用选择器和样式规则来为菜单添加样式。
vue导航菜单的实现（含二级菜单）
vue导航菜单的实现（含⼆级菜单）<template><div class="nav"><div class="nav-a"><ul class="nav-a-ul"><li class="nav-a-li" :class="classA == index ? 'active' : '' " @click="selected(index)" v-for="(item,index) in configNav"><router-link :to='item.path' class="nav-a-text" @click="showToggle(index)">{{}}</router-link><ul class="menu_ul" :class="{'active' :index===isShow}"><li class="menu_li" v-for = "nav in item.subItems" :class="classB == nav ? 'active' : '' " @click="menuselected(nav)"><router-link class="menu_ul_text" :to="nav.link" :class="{'active':nav.link == linkClick}" @click = "treeNavSwitch(nav)"> {{nav.text}}</router-link></li></ul></li></ul></div></div></template><script>export default {name: "Header",data() {return {show: false,classA: 0,classB: 0,isShow: 0,linkClick: "",configNav: [{name: "⾸页",path:'/gwindex',},{name: "产品介绍",path:'',subItems:[{ link:'/education',text: '教学管理系统'},{ link:'/yingxiaozhaosheng',text: '营销招⽣系统' },{ link:'',text: '视频直播系统' },{ link:'',text: '个性化定制服务' }]},{name: "渠道合作",path:'/partner',},{name: "关于我们",path:'/aboutour',}]}},methods: {selected: function(index) {this.classA = index;},menuselected: function(nav) {this.classB = nav;},showToggle: function(index) {this.isShow = index;treeNavSwitch: function(nav) { this.linkClick = nav.link;}}};</script><style scoped>.nav {width: 80%;min-width: 1300px;height: auto;margin: 0px auto;position: absolute;border-bottom: none;line-height: 65px;}.nav-a {cursor: pointer;float: left;margin-left: 50px;letter-spacing: 4px;position: relative;}.nav-a-ul {list-style: none;}.nav-a-li {display: inline-block;margin-left: 30px;height: 60px;}.nav-a-text {font-size: 14px;color: #fff;line-height: 58px;text-decoration: none;}.menu_ul {width: 130px;list-style: none;background: #fff;border-radius: 3px;z-index: 999;position: absolute;top: 58px;left: 67px;display: none;}.menu_li {height: 30px;line-height: 30px;padding-left: 12px;}.menu_ul_text {font-size: 14px;color: #666;letter-spacing: 0;line-height: 30px;text-decoration: none;padding-left: 6px;}.nav-a-li:hover {border-bottom: 2px solid #fff; }.nav-a-li.active {border-bottom: 2px solid #fff;/* .nav-a-li:active {border-bottom: 2px solid #fff; } */.nav-a-li:hover .menu_ul {display: block;}.menu_ul_text:hover {color: #2589ff;}.menu_li.active .menu_ul_text{ color: #2589ff;}</style>。
一款基于jquery和css3的响应式二级导航菜单
⼀款基于jquery和css3的响应式⼆级导航菜单今天给⼤家分享⼀款基于jquery和css3的响应式，这款导航是传统的基于顶部，⿏标经过的时候显⽰⼆级导航，还采⽤了当前流⾏的。
效果图如下：实现的代码。
html代码：<div id="header"><div class="logo"><a href="#">Responsive Nav</a></div><nav><form class="search" action="search.php"><input name="q" placeholder="Search..." type="search"></form><ul><li><a href="">Home</a></li><li><a href="">About</a><ul class="mega-dropdown"><li class="row"><ul class="mega-col"><li><a href="#">About</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li></ul><ul class="mega-col"><li><a href="#">Help</a></li><li><a href="#">Pricing</a></li><li><a href="#">Team</a></li><li><a href="#">Services</a></li></ul><ul class="mega-col"><li><a href="#">Coming Soon</a></li><li><a href="#">404 Error</a></li><li><a href="#">Search</a></li><li><a href="#">Author Page</a></li></ul><ul class="mega-col"><li><a href="#">Full Width</a></li><li><a href="#">Right Column</a></li><li><a href="#">Left Column</a></li><li><a href="#">Maintenance</a></li></ul></li></ul></li><li class="dropdown"><a href="">Contact</a><ul><li><a href="#">About Version</a></li><li><a href="#">About Version</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Contact Us</a></li></ul></li><li><a href="">Portfolio</a></li><li><a href="">Team</a></li></ul></nav></div>css3代码：*, *:before, *:after{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}body{background: #bdc3c7;line-height: 1.5;font-family: sans-serif;text-transform: uppercase; font-size: 16px;color: #fff;}a{text-decoration: none;color: #fff;}#header{background: #1E262D;width: 100%;position: relative;}#header:after{content: "";clear: both;display: block;}.search{float: right;padding: 30px;}input{border: none;padding: 10px;border-radius: 20px;}.logo{float: left;padding: 26px 0 26px;}.logo a{font-size: 28px;display: block;padding: 0 0 0 20px;}nav{float: right;}nav > ul{float: left;position: relative;}nav li{list-style: none;float: left;}nav .dropdown{position: relative;}nav li a{float: left;padding: 35px;}nav li a:hover{background: #2C3E50;}nav li ul{display: none;}nav li:hover ul{display: inline;}nav li li{float: none;}nav .dropdown ul{left: 0;top: 100%;background: #fff;padding: 20px 0;border-bottom: 3px solid #34495e;}nav .dropdown li{white-space: nowrap;}nav .dropdown li a{padding: 10px 35px;font-size: 13px;min-width: 200px;}nav .mega-dropdown{width: 100%;position: absolute;top: 100%;left: 0;background: #fff;overflow: hidden;padding: 20px 35px;border-bottom: 3px solid #34495e;}nav li li a{float: none;color: #333;display: block;padding: 8px 10px;border-radius: 3px;font-size: 13px;}nav li li a:hover{background: #bdc3c7;background: #FAFBFB;}.mega-col{width: 25%;float: left;}#menu-icon{position: absolute;right: 0;top: 50%;margin-top: -12px;margin-right: 30px;display: none;}#menu-icon span{border: 2px solid #fff;width: 30px;margin-bottom: 5px;display: block;-webkit-transition: all .2s;transition: all .1s;}@media only screen and (max-width: 1170px) {nav > ul > li > a{padding: 35px 15px;}}@media only screen and (min-width: 960px) {nav{display: block !important;}}@media only screen and (max-width: 959px) {nav{display: none;clear: both;float: none;max-height: 400px;overflow-y: scroll;}#menu-icon{display: inline;top: 45px;cursor: pointer;}#menu-icon.active .first{transform: rotate(45deg);-webkit-transform: rotate(45deg); margin-top: 10px;}#menu-icon.active .second{transform: rotate(135deg);-webkit-transform: rotate(135deg); position: relative;top: -9px;}#menu-icon.active .third{display: none;}.search{float: none;}.search input{width: 100%;}nav{padding: 10px;}nav ul{float: none;}nav li{float: none;}nav ul li a{float: none;padding: 8px;display: block;}#header nav ul ul{display: block;position: static;background: none;border: none;padding: 0;}#header nav a{color: #fff;padding: 8px;}#header nav a:hover{background: #fff;color: #333;border-radius: 3px;}#header nav ul li li a:before{content: "- ";}.mega-col{width: 100%;}}js代码：$('#header').prepend('<div id="menu-icon"><span class="first"></span><span class="second"></span><span class="third"></span></div>'); $('#menu-icon').on('click', function () {window.CP.stopExecutionOnTimeout(1);$('nav').slideToggle();$(this).toggleClass('active');}); //@ sourceURL=pen.js。
JS中用三种方式实现导航菜单中的二级下拉菜单
JS中⽤三种⽅式实现导航菜单中的⼆级下拉菜单 我们在淘宝、搜狐等⼤型⽹站上都可以看到使⽤的⼀些⼆级下拉菜单，⽐如下⾯这张图⽚。
那么如何实现导航菜单栏中的⼆级下拉菜单？下⾯⼩编给⼤家分享实现思路。
但是如何实现类似的图⽚呢？实际上，我们有⾄少三种⽅式来实现，下⾯，我附上代码供⼤家参考。
1.仅使⽤html和css<meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding: 0;list-style: none;text-decoration: none;}#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}ul{background: #aaa}ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}ul li:hover{background: #cea;}ul li ul li{float: none;}/*关键⼀：将⼆级菜单设置为display：none;*/ul li ul{position: absolute;top:40px;left: 0; display: none;}ul li ul li:hover{background: red;}/*关键⼆：在划过⼆级菜单从属的⼀级菜单时，设置为display:block;*/ul li:hover ul{display: block;}</style><div id="nav"><ul><li><a href="">⾸页</a></li><li><a href="">汽车</a><ul><li><a href="#">奥迪</a> </li><li><a href="#">道奇</a> </li></ul></li><li><a href="">⼿机</a><ul><li><a href="#">⼩⽶</a> </li><li><a href="#">华为</a> </li></ul></li><li><a href="">联系我们</a></li></ul></div> 我们可以看到，这种⽅法是⽐较好的，它保证了结构与表现的完全分离。
js仿小米二级菜单显示效果
js仿⼩⽶⼆级菜单显⽰效果本⽂实例为⼤家分享了js仿⼩⽶⼆级菜单显⽰效果的具体代码，供⼤家参考，具体内容如下提⽰：以下是本篇⽂章正⽂内容，下⾯案例可供参考⼀、效果展⽰⼆、代码1.页⾯样式代码如下（⽰例）：<!-- 搜索栏主导航 logo --><header class="clearfix"><div class="w"><div class="logo"><div class="logo-img"><img src="images/This_is_tow_Mi.png" alt=""></div></div><ul class="main-nav"><li><a href="javascript:;">⼩⽶⼿机</a></li><li><a href="javascript:;">Redmi红⽶</a></li><li><a href="javascript:;">电视</a></li><li><a href="javascript:;">笔记本</a></li><li><a href="javascript:;">家电</a></li><li><a href="javascript:;">路由器</a></li><li><a href="javascript:;">智能硬件</a></li><li><a href="javascript:;">服务</a></li><li><a href="javascript:;">社区</a></li></ul><div class="ss"><input type="text" placeholder="智能硬件"><button></button></div></div></header><!-- ⼆级菜单 --><div class="sec-nav"><div class="w"><ul id="sec"><li><img src="images/Mi_images/Mi_10pro.jpg"><p>⼩⽶10 Pro</p><p>4699元起</p></li><li><img src="images/Mi_images/Mi_10pro.jpg"><p>⼩⽶10 Pro</p><p>4699元起</p></li><li><img src="images/Mi_images/Mi_10pro.jpg"><p>⼩⽶10 Pro</p><p>4699元起</p></li><li><img src="images/Mi_images/Mi_10pro.jpg"><p>⼩⽶10 Pro</p><p>4699元起</p></li><li><img src="images/Mi_images/Mi_10pro.jpg"><p>⼩⽶10 Pro</p><p>4699元起</p></li><li><img src="images/Mi_images/Mi_10pro.jpg"><p>⼩⽶10 Pro</p><p>4699元起</p></li></ul></div></div>2.css样式代码如下（⽰例）：/* 头部 */header {height: 100px;line-height: 100px;}header .logo {float: left;width: 180px;height: 100%;padding: 15px 0;}.logo-img {width: 50px;height: 50px;margin: 10px 0;background-color: #ff6900; border-radius: 20px;overflow: hidden;}.logo-img img {position: relative;top: -27px;width: 100%;vertical-align: middle;}.main-nav {float: left;/* margin-left: 20px; */overflow: hidden;}.main-nav>li {float: left;padding-left: 20px;}.main-nav li a {color: #000;padding: 5px;}.main-nav>li a:hover {color: #ff6900;}.ss {float: right;margin-left: 30px;}.ss input {width: 220px;height: 50px;padding-left: 10px;border: 1px solid #eee;}.ss button {position: relative;top: -4px;width: 50px;height: 50px;background-color: #fff;border: 1px solid #eee;}.ss button::after {content: '\e914';font-family: 'icomoon';position: absolute;top: 14px;left: 14px;font-size: 20px;}.sec-nav {overflow: hidden;position: absolute;top: 140px;left: 0;width: 100%;height: 0px;background-color: #fff;z-index: 15;}.sec_hover {height: 200px;box-shadow: 0px 2px 2px 0px #eee;border: 1px solid #eee;}.sec-nav ul {overflow: hidden;}.sec-nav ul li {float: left;width: 180px;padding: 10px 10px;}.sec-nav ul li img {width: 100%;border-right: 2px solid #eee;}.sec-nav p {text-align: center;line-height: 20px;}.sec-nav ul li p:nth-child(2) {font-size: 13px;margin-top: 20px;}.sec-nav ul li p:nth-child(3) {font-size: 12px;color: #ff6900;}3.js样式采⽤了动态⽣成元素节点。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
二级导航菜单
网站建站
实现效果如下：
一、新建导航菜单
1、列表如下：
2、在环境下，代码如下：
<%@Page Language="C#"AutoEventWireup="true"CodeFile="二级菜单模板.aspx.cs"Inherits="二级菜单模板" %>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1"runat="server">
<div>
<ul>
<li><a href="#"title="首页">首页</a></li>
<li><a href="#"title="导航栏一">导航栏一</a>
<ul>
<li><a href="#"title="导一*菜单栏一">导一*菜单栏一</a></li>
<li><a href="#"title="导一*菜单栏二">导一*菜单栏二</a></li>
<li><a href="#"title="导一*菜单栏三">导一*菜单栏三</a></li>
<li><a href="#"title="导一*菜单栏四">导一*菜单栏四</a></li>
</ul>
</li>
<li><a href="#"title="导航栏二">导航栏二</a>
<ul>
<li><a href="#"title="导二*菜单栏一">导二*菜单栏一</a></li>
<li><a href="#"title="导二*菜单栏二">导二*菜单栏二</a></li>
<li><a href="#"title="导二*菜单栏三">导二*菜单栏三</a></li>
<li><a href="#"title="导二*菜单栏四">导二*菜单栏四</a></li>
</ul>
</li>
<li><a href="#"title="导航栏三">导航栏三</a>
<ul>
<li><a href="#"title="导三*菜单栏一">导三*菜单栏一</a></li>
<li><a href="#"title="导三*菜单栏二">导三*菜单栏二</a></li>
<li><a href="#"title="导三*菜单栏三">导三*菜单栏三</a></li>
<li><a href="#"title="导三*菜单栏四">导三*菜单栏四</a></li>
</ul>
</li>
<li><a href="#"title="导航栏四">导航栏四</a>
<ul>
<li><a href="#"title="导四*菜单栏一">导四*菜单栏一</a></li>
<li><a href="#"title="导四*菜单栏二">导四*菜单栏二</a></li>
<li><a href="#"title="导四*菜单栏三">导四*菜单栏三</a></li>
<li><a href="#"title="导四*菜单栏四">导四*菜单栏四</a></li> </ul>
</li>
<li><a href="#"title="导航栏五">导航栏五</a>
<ul>
<li><a href="#"title="导五*菜单栏一">导五*菜单栏一</a></li>
<li><a href="#"title="导五*菜单栏二">导五*菜单栏二</a></li>
<li><a href="#"title="导五*菜单栏三">导五*菜单栏三</a></li>
<li><a href="#"title="导五*菜单栏四">导五*菜单栏四</a></li> </ul>
</li>
<li><a href="#"title="导航栏六">导航栏六</a>
<ul>
<li><a href="#"title="导六*菜单栏一">导六*菜单栏一</a></li>
<li><a href="#"title="导六*菜单栏二">导六*菜单栏二</a></li>
<li><a href="#"title="导六*菜单栏三">导六*菜单栏三</a></li>
<li><a href="#"title="导六*菜单栏四">导六*菜单栏四</a></li> </ul>
</li>
</ul>
</div>
</form>
</body>
</html>
二、添加样式。