【实例简介】
【实例截图】
【核心代码】
无标题文档
*{
margin:0;
padding:0;}/*通用选择器样式*/
body{
font-family:"微软雅黑";}/*标签选择器样式，规定页面的基本字体类型为“微软雅黑”*/
li{
list-style-type:none;}/*标签选择器样式，规定所有的列表类型为去除前面的符号标记*/
#nav{
width:200px;}
#nav h3{
height:50px;
line-height:50px;
background-color:#f00;
background-image:url(images/list.png);
background-repeat:no-repeat;
background-position:15px center;
padding-left:45px;
color:#fff;}/*后代选择器样式，定义3号标题字标签的显示效果*/
#nav>ul>li{
background-repeat:no-repeat;
background-position:20px center;
height:35px;
line-height:35px;
background-color:#ccc;
padding-left:45px;
position:relative;}/*子选择器样式(直接后代选择器样式)，仅适用于一级目录中的ul下的li*/
#nav>ul>li>a,#nav>ul>li>a:visited{
text-decoration:none;
color:#fff;
font-size:15px;
font-weight:bold;}/*两组直接后代选择器组合形成的群组选择器*/
#nav ul li ul{
position:absolute;
left:200px;
top:0px;
width:150px;
display:none;}/*后代选择器样式，规定嵌套的无序列表的定位以及默认不显示*/
#nav ul li ul li a,#nav ul li ul li a:visited{
text-decoration:none;
color:#fff;
font-size:13px;}/*两个后代选择器组合形成的群组选择器*/
#nav ul li ul li{
padding-left:20px;}/*后代选择器样式*/
#nav>ul li:hover{
background-color:#99f;}
#nav>ul li:hover ul{
background-color:#99f;
display:block;}
海洋食品分类
海洋休闲食品
即食参鲍类即食烤鱼类即食虾贝类即食鱿鱼类麻辣海鲜类
鲜活水产品
鲜鱼类鲜虾类贝壳类参鲍类其它鲜活类
冷冻水产品
冰冻鱼类冰冻虾类冰冻参鲍类其它冰冻类
干制水产品
鱼干类虾贝干类干参鲍类其它干制类
腌制水产品
咸鱼类其它腌制类
海产调味品
海鲜调味汁海鲜调味酱海鲜调味料其它调味类
海产罐头食品
油浸类罐头调味类罐头清蒸类水产罐头其它罐头类
