html简单的二级菜单制作

级导航

具体实现方法如下：

首先在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这个属性控制二级菜单的显示和隐藏就可以了。

下一个文章：轮播图

何简洁实现电商网站常用的二级菜单显示特色产品？这是一个广泛的东西，哪家和哪家的都不一样，所以说出一个标准答案，似乎不太可能。主要是看需求吧。

前2天，接一个私活，要求在产品下拉菜单中实现二级菜单的特色产品，我不知道这样说，是不是说清楚了，简单些，就是当鼠标移动到一级菜单时，显示二级菜单，鼠标移到二级菜单选项时，在二级菜单的右侧出现特色产品的缩略图和名称。

本人理工男，语言表达差，请谅解，还是看效果图吧：

二级菜单显示特色图片

大家把下拉菜单理解为公司产品，把第一个。。。第5个，理解为产品系列，而雪山飞狐中的人物头像就想想成一个个活生生的产品，就可以了。

下面开始说是如何实现的。

一、HTML结构：

如图：

html结构1

HTML结构2

HTML结构完成

二、书写css样式：

css样式

css样式2

css样式3

css样式4,完结

三、jquery代码：

jquery代码

PS：需要注意的2点：

1、不要忘记引入jquery库呀。

2、注意hover的对象：

如果哪位需要代码文件的话，请在评论区留言，我会发送给你。

家好，今天给大家介绍一款，css+JavaScript实现的二级导航菜单html页面前端源码（图1）。送给大家哦，获取方式在本文末尾。

图1

点击左侧菜单栏即可弹出二级菜单（图2）

图2

源码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：20225，需要的朋友，访问下面链接后，搜索20225，即可获取。

「链接」

在线咨询

上一篇：Html基本理论与标签使用
下一篇：教你结合您的品牌设计一个圆形标志

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。