先看下jquery仿京东导航效果：
前端html代码如下：
复制代码 代码如下:
- baidu
- goolge
- yahoo
- microsoft
baidu
yahoo
microsoft
html{color:#666;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font:12px/1.3 arial,helvetica,clean,sans-serif,5b8b4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
table{border-collapse:collapse;border-spacing:0;}
img{border:none;}
a{text-decoration:none; color:#666;}
a:hover{text-decoration:underline; color:#FF6600;}
ul,li{list-style-type:none;}
q:before,q:after{content:'';}
sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}
body{ margin:100px;}
ul li{line-height:30px; border:1px solid #E5D1A1; text-align:center; margin-top:-1px; width:200px; background:#FFFDD2; position:relative; z-index:1;}
.tips{position:absolute; width:150px; height:150px; border:1px solid #E5D1A1; background:#fff; z-index:2; display:none;}
js代码：
复制代码 代码如下:
效果图如下，
jQuery仿京东左侧菜单效果，适合商城产品导航，这里没有做的那么细，只是使用CSS结合jQuery完成了菜单的简单效果，如果需要美化，请您在实际应用中自己搞一下吧，兼容性非常不错的，欢迎大家使用。
