整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
级导航
具体实现方法如下：
首先在html中写出一级菜单列表，然后在每个一级菜单中再嵌套一个列表即可创建一个二级菜单。
index.html
<div class="menu">
<ul>
<li><a href="">一级菜单</a>
<ul>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
</ul>
</li>
<li><a href="">一级菜单</a>
<ul>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
</ul>
</li>
<li><a href="">一级菜单</a>
<ul>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
</ul>
</li>
</ul>
</div>接着写样式文件，主要是对列表样式和位置进行修改
<style>
* {
padding: 0;/*内边距:分别左,上,右,下都为0,这样就不会出现左右上下内间距*/
margin: 0/*外边距:分别左,上,右,下都为0,这样就不会出现左右上下间距*/
}
.menu ul li {
list-style: none;/*列表样式*/
background-color: burlywood;/*背景颜色*/
width: 120px;/*宽度*/
text-align: center;/*文本对齐:居中*/
height: 40px;/*高度*/
position: relative/*定位:一般用这个就可以绝对定位*/
}
.menu ul li a {
text-decoration: none;/*超链接下划线:无*/
display: block;/*显示:正常显示用block,隐藏none*/
line-height: 40px
}
.menu ul li:hover {
background-color: aqua
}
.menu ul li ul {
display: none;
position: absolute;
left: 120px;
top: 0
}
.menu ul li:hover ul {
display: block
}
</style>这里需要注意的是一级菜单列表的定位方式要设置为relative,二级菜单列表的定位方式要设置为absolute，这样二级菜单才会在一级菜单相对的位置出现。
然后通过display这个属性控制二级菜单的显示和隐藏就可以了。
下一个文章：轮播图
本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作；菜单导航是网站建设中最常用的一块了，基本每个网站内都会有个导航菜单，用鼠标划过还可以有下拉子菜单。
由上图我们可以看出，该图包含一个横向导航条，然后鼠标经过横向导航条之后，子导航显示出来。
我们这里主要用到的知识点就是列表标签（ul、dl）的使用、浮动（float）的使用、绝对定位（absolute）及鼠标经过（hover）的效果。
1、列表标签ul、dl（我们使用ul、dl来创建同类型的导航元素内容，通过设置css样式来达到图片所示效果）；
2、浮动元素float（每个导航元素我们需要使用float:left;让其左对齐，这里涉及到了我们之前讲解的如何清除浮动的影响）；
3、绝对定位absolute（对于子导航我们要使用绝对定位来让其浮动在上级有定位元素的下方，不占据元素空间）
4、鼠标经过hover（使用css的鼠标经过元素（hover）效果，配合display的none（隐藏）和block（显示）来实现子菜单的显示与隐藏）
具体的实现html代码以及css代码就如下图所示：
还有一个纵向菜单导航原理跟横向的类似，只需简单调整一下css代码即可。
html代码跟横向一样，这里就不再贴图，具体的实现图片效果以及css代码就如下图所示：
好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信我即可。
每日金句：每天收获小进步，积累起来就是大进步；每天收获小幸福，积攒起来便成大幸福。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
何简洁实现电商网站常用的二级菜单显示特色产品？这是一个广泛的东西，哪家和哪家的都不一样，所以说出一个标准答案，似乎不太可能。主要是看需求吧。
前2天，接一个私活，要求在产品下拉菜单中实现二级菜单的特色产品，我不知道这样说，是不是说清楚了，简单些，就是当鼠标移动到一级菜单时，显示二级菜单，鼠标移到二级菜单选项时，在二级菜单的右侧出现特色产品的缩略图和名称。
本人理工男，语言表达差，请谅解，还是看效果图吧：
二级菜单显示特色图片
大家把下拉菜单理解为公司产品，把第一个。。。第5个，理解为产品系列，而雪山飞狐中的人物头像就想想成一个个活生生的产品，就可以了。
下面开始说是如何实现的。
一、HTML结构：
如图：
html结构1
HTML结构2
HTML结构完成
二、书写css样式：
css样式
css样式2
css样式3
css样式4,完结
三、jquery代码：
jquery代码
PS：需要注意的2点：
1、不要忘记引入jquery库呀。
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
2、注意hover的对象：
<!-- css书写必须为li:hover否则的话，二级菜单出不来。 -->
如果哪位需要代码文件的话，请在评论区留言，我会发送给你。
*请认真填写需求信息，我们会在24小时内与您取得联系。
