基本信息
源码名称：纯css实现横向下拉导航菜单(可做左侧类目导航)
源码大小：7.31KB
文件格式：.zip
开发语言：CSS
更新时间：2018-06-29
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
	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;}
</style>
</head>

<body>
<div id="nav">
  <h3>海洋食品分类</h3>
  <ul>
    <li style="background-image:url(images/xiuxian.png)">
    <a href="#" target="_blank">海洋休闲食品</a>
    <ul><li><a href="#" target="_blank">即食参鲍类</a></li>
      <li><a href="#" target="_blank">即食烤鱼类</a></li>
      <li><a href="#" target="_blank">即食虾贝类</a></li>
      <li><a href="#" target="_blank">即食鱿鱼类</a></li>
      <li><a href="#" target="_blank">麻辣海鲜类</a></li>
    </ul>
    </li>
    <li style="background-image:url(images/xianhuo.png)">
    <a href="#" target="_blank">鲜活水产品</a>
    <ul><li><a href="#" target="_blank">鲜鱼类</a></li>
      <li><a href="#" target="_blank">鲜虾类</a></li>
      <li><a href="#" target="_blank">贝壳类</a></li>
      <li><a href="#" target="_blank">参鲍类</a></li>
      <li><a href="#" target="_blank">其它鲜活类</a></li>
    </ul>
    </li>
    <li style="background-image:url(images/lengdong.png)">
    <a href="#" target="_blank">冷冻水产品</a>
    <ul><li><a href="#" target="_blank">冰冻鱼类</a></li>
      <li><a href="#" target="_blank">冰冻虾类</a></li>
      <li><a href="#" target="_blank">冰冻参鲍类</a></li>
      <li><a href="#" target="_blank">其它冰冻类</a></li>
    </ul>
    </li>
    <li style="background-image:url(images/ganzhi.png)">
    <a href="#" target="_blank">干制水产品</a>
    <ul><li><a href="#" target="_blank">鱼干类</a></li>
      <li><a href="#" target="_blank">虾贝干类</a></li>
      <li><a href="#" target="_blank">干参鲍类</a></li>
      <li><a href="#" target="_blank">其它干制类</a></li>
    </ul>
    </li>
    <li style="background-image:url(images/yanzhi.png)">
    <a href="#" target="_blank">腌制水产品</a>
    <ul><li><a href="#" target="_blank">咸鱼类</a></li>
      <li><a href="#" target="_blank">其它腌制类</a></li>
    </ul>
    </li>
    <li style="background-image:url(images/tiaowei.png)">
    <a href="#" target="_blank">海产调味品</a>
    <ul><li><a href="#" target="_blank">海鲜调味汁</a></li>
      <li><a href="#" target="_blank">海鲜调味酱</a></li>
      <li><a href="#" target="_blank">海鲜调味料</a></li>
      <li><a href="#" target="_blank">其它调味类</a></li>
    </ul>
    </li>
    <li style="background-image:url(images/guantou.png)">
    <a href="#" target="_blank">海产罐头食品</a>
    <ul><li><a href="#" target="_blank">油浸类罐头</a></li>
      <li><a href="#" target="_blank">调味类罐头</a></li>
      <li><a href="#" target="_blank">清蒸类水产罐头</a></li>
      <li><a href="#" target="_blank">其它罐头类</a></li>
    </ul>
    </li>
  </ul>
</div>
</body>
</html>