公司网站建设技术方案模板,阿里巴巴官网电脑版,网站制作网站搭建,怎样推广一个产品支持多种浏览器#xff0c;体验效果#xff1a;http://keleyi.com/keleyi/phtml/jqmenu/4.htm多级菜单#xff0c;理论上支持无限多的层级#xff0c;文件结构非常简单的#xff0c;以下是完整代码#xff1a; 1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 T…支持多种浏览器体验效果http://keleyi.com/keleyi/phtml/jqmenu/4.htm多级菜单理论上支持无限多的层级文件结构非常简单的以下是完整代码 1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd2 html xmlnshttp://www.w3.org/1999/xhtml3 head4 titlejquery实现多级下拉菜单-柯乐义/title5 style6 /* navigation style */7 #keleyi-com-nav{8 height: 39px;9 font: 12px Geneva, Arial, Helvetica, sans-serif;10 background: #2D2D2D;11 border: 1px solid #323232; 12 border-radius: 3px;13 min-width:500px;14 margin-left: 0px;15 padding-left: 0px;16 } 17 18 #keleyi-com-nav li{19 list-style: none;20 display: block;21 float: left;22 height: 40px;23 position: relative;24 border-right: 1px solid #323232;25 }26 27 #keleyi-com-nav li a{28 padding: 0px 10px 0px 30px;29 margin: 0px 0;30 line-height: 40px;31 text-decoration: none;32 border-right: 1px solid #636161;33 height: 40px;34 color: #FFF;35 text-shadow: 1px 1px 1px #66696B;36 }37 38 #keleyi-com-nav ul{39 background: #f2f5f6; 40 padding: 0px;41 border-bottom: 1px solid #DDDDDD;42 border-right: 1px solid #DDDDDD;43 border-left:1px solid #DDDDDD;44 border-radius: 0px 0px 3px 3px;45 box-shadow: 2px 2px 3px #ECECEC;46 -webkit-box-shadow: 2px 2px 3px #ECECEC;47 -moz-box-shadow:2px 2px 3px #ECECEC;48 width:170px;49 }50 #keleyi-com-nav .site-name,#keleyi-com-nav .site-name:hover{51 padding-left: 10px;52 padding-right: 10px;53 color: #FFF;54 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/logo.png) no-repeat 10px 5px;55 width: 160px;56 }57 #keleyi-com-nav .site-name a{58 width: 129px;59 overflow:hidden;60 }61 #keleyi-com-nav li.facebook{62 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px;63 }64 #keleyi-com-nav li.facebook:hover {65 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px #010101;66 }67 #keleyi-com-nav li.yahoo{68 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px;69 }70 #keleyi-com-nav li.yahoo:hover {71 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px #010101;72 }73 74 75 #keleyi-com-nav li:hover{76 background: #010101;77 }78 #keleyi-com-nav li a{79 display: block;80 }81 #keleyi-com-nav ul li {82 border-right:none;83 border-bottom:1px solid #DDDDDD;84 width:170px;85 height:39px;86 }87 #keleyi-com-nav ul li a {88 border-right: none;89 color:#6791AD;90 text-shadow: 1px 1px 1px #FFF;91 border-bottom:1px solid #FFFFFF;92 }93 #keleyi-com-nav ul li:hover{background:#DFEEF0;}94 #keleyi-com-nav ul li:last-child { border-bottom: none;}95 #keleyi-com-nav ul li:last-child a{ border-bottom: none;}96 /* Sub menus */97 #keleyi-com-nav ul{98 display: none;99 visibility:hidden;
100 position: absolute;
101 top: 40px;
102 }
103
104 /* Third-level menus */
105 #keleyi-com-nav ul ul{
106 top: 0px;
107 left:170px;
108 display: none;
109 visibility:hidden;
110 border: 1px solid #DDDDDD;
111 }
112 /* Fourth-level menus */
113 #keleyi-com-nav ul ul ul{
114 top: 0px;
115 left:170px;
116 display: none;
117 visibility:hidden;
118 border: 1px solid #DDDDDD;
119 }
120
121 #keleyi-com-nav ul li{
122 display: block;
123 visibility:visible;
124 }
125 #keleyi-com-nav li:hover ul{
126 display: block;
127 visibility:visible;
128 }
129 /style
130 !--[if IE 7]
131 style
132 #keleyi-com-nav{
133 margin-left:0px
134 }
135 #keleyi-com-nav ul{
136 left:-40px;
137 }
138 #keleyi-com-nav ul ul{
139 left:130px;
140 }
141 #keleyi-com-nav ul ul ul{
142 left:130px;
143 }
144 /style
145 ![endif]--
146 script typetext/javascript srchttp://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js/script
147 script typetext/javascript
148 $(document).ready(function () {
149 $(#keleyi-com-nav li).hover(
150 function () {
151 $(this).children(ul).hide();
152 $(this).children(ul).slideDown(fast);
153 },
154 function () {
155 $(ul, this).slideUp(fast);
156 });
157 });
158 /script
159 /head
160 body
161 ul idkeleyi-com-nav
162 li classsite-namea hrefhttp://keleyi.comnbsp;/a/li
163 li classyahooa hrefhttp://keleyi.com导航菜单/a
164 ul
165 lia hrefhttp://keleyi.com/a/bjac/veugsmw9.htm导航菜单二级分类 raquo;/a
166 ul
167 lia hrefhttp://keleyi.com1/a/li
168 lia hrefhttp://keleyi.com/a/bjac/r55i6646.htm2/a/li
169 lia hrefhttp://keleyi.com3/a/li
170 lia hrefhttp://keleyi.com导航菜单三 raquo;/a
171 ul
172 lia hrefhttp://keleyi.com导航菜单4/a/li
173 lia hrefhttp://keleyi.com/a/bjac/c6gu08gm.htm1/a/li
174 /ul
175 /li
176 /ul
177 /li
178 lia hrefhttp://keleyi.com1/a/li
179 lia hrefhttp://keleyi.com2/a/li
180 /ul
181 /li
182 li classfacebooka hrefhttp://keleyi.com翻页/a
183 ul
184 lia hrefhttp://keleyi.com1/a/li
185 lia hrefhttp://keleyi.com2/a/li
186 /ul
187 /li
188 /ul
189 /body
190 /html 更多菜单http://keleyi.com/a/bjac/veugsmw9.htm Web前端资源汇总http://www.cnblogs.com/jihua/p/webfront.html 原文http://keleyi.com/a/bjac/qe60secm.htm转载于:https://www.cnblogs.com/jihua/p/jquerymenu.html
