jQuery商品分类导航菜单切换

1、新建html文档。

3、书写css代码。* { margin: 0; padding: 0; border: none; }body, html { margin: 0; padding: 0; width: 100%; /* background: #f4f4f4;*/background: #e3e3e3; font: 16px Microsoft YaHei, arial, sans-serif; }ul { margin: 0; padding: 0; list-style-type: none; }a { text-decoration: none; }.containor { width: 1000px; height: auto; position: relative; margin: 0 auto; top: 50px; }.nav_left { width: 200px; height: 500px; background: #FF0036; }.nav_left ul { width: 100%; height: auto; }.nav_left ul li { height: 50px; line-height: 50px; text-align: left; }.nav_left ul li span { padding-left: 10px; height: 50px; line-height: 50px; display: block; background: #FF0036; color: #fff; }.nav_left ul li span:hover { color: #FF0036; background: #FFFFFF; }.nav_right { width: 800px; height: 500px; position: absolute; margin-left: 200px; top: 0px; }.sub { position: relative; overflow: hidden; width: 100%; height: 480px; background: #FFFFFF; padding: 10px 0px; }.sub dl { overflow: hidden; padding: 0px 0px 10px 0px; }.sub dt { width: 100px; float: left; display: block; position: relative; clear: left; }.sub dt a { font-size: 14px; color: #000; font-weight: bold; text-align: center; padding-left: 20px; text-decoration: none; cursor: pointer; }.sub dt i { width: 4px; right: 12px; top: 2px; font-size: 14px; position: absolute; font-style: normal; }.sub dd { width: 680px; float: left; display: block; position: relative; overflow: hidden; padding-right: 20px; border-bottom: 1px dashed #E3E3E3; }.sub dd a { font-size: 12px; float: left; color: #666; padding: 0 10px; margin: 4px 0px 10px 0px; text-decoration: none; cursor: pointer; border-left: 1px solid #E3E3E3; }.sub dd a:hover { color: #FF0036; }.hide { display: none; }.show { display: block; }

5、代码整体结构。