html下拉菜单几种方式,html下拉菜单的实现方式

方法一：纯css实现下拉菜单

Document

margin: 0;

padding:0;

}

#nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/

background: #eee;

width: 600px;

height: 40px;

margin: 0 auto;

}

#nav ul{/*去掉点点*/

list-style: none;

}

#nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/

float: left;

line-height: 40px;

text-align: center;

position: relative;/*给子ul定位用的*/

}

#nav ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/

text-decoration: none;

color:#000;

padding:0 10px;

display: block;

}

#nav ul li a:hover{

color: #fff;

background-color: #666;

}

#nav ul li ul {

position: absolute;/*相对于父li的位置进行定位*/

left: 0;

top:40px;

display: none;/*隐藏下拉菜单*/

}

#nav ul li ul li{

float: none;

background-color:red;

}

#nav ul li:hover ul{

display: block;

}

首页
课程大厅
- Javascript
- Jquery
学习中心
经典案例
关于我们

方法二：js实现下拉菜单

Document

margin: 0;

padding:0;

}

#nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/

background: #eee;

width: 600px;

height: 40px;

margin: 0 auto;

}

#nav ul{/*去掉点点*/

list-style: none;

}

#nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/

float: left;

line-height: 40px;

text-align: center;

position: relative;/*给子ul定位用的*/

}

#nav ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/

text-decoration: none;

color:#000;

padding:0 10px;

display: block;

}

#nav ul li a:hover{

color: #fff;

background-color: #666;

}

#nav ul li ul {

position: absolute;/*相对于父li的位置进行定位*/

left: 0;

top:40px;

display: none;

}

#nav ul li ul li{

float: none;

background-color:#eee;

}

function show(li){

var sub=li.getElementsByTagName("ul")[0];

sub.style.display="block";

}

function hide(li){

var sub=li.getElementsByTagName("ul")[0];

sub.style.display="none";

}

首页
课程大厅
- Javascript
- Jquery
学习中心
经典案例
关于我们
- Javascript
- Jquery

html下拉菜单几种方式,html下拉菜单的实现方式相关推荐

android无感刷新下拉分页,GitHub - TakWolf/Android-RefreshAndLoadMore-Demo: 一种简单的并且优雅的方式实现下拉刷新和加载更多的分页效果。...
Android - RefreshAndLoadMore Demo 一种简单的并且优雅的方式实现下拉刷新和加载更多的分页效果. 包含 ListView 和 RecyclerView 两种组件的对应实现 ...
java 获取下拉框的值_Java获取下拉菜单选中的选项
提到这样一个需求"在新闻表中添加新闻分类的编号和名字",一般情况下我们将分类的ID放在下拉菜单选项的value中,此时需要获取选项的编号和名字,我们该怎么做呢?我常用的有如下两种方 ...
c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...
不使用输入框如何实现下拉_如何利用Axure实现下拉子菜单？
Axure RP是一款专业的快速原型设计工具,让我们能够快速设计并创建出应用软件或Web页面的具备高保真和交互能力的原型.通过原型设计,不但能更好地与客户进行交流确认,也能明确地给开发人员以成品效果作 ...
右边菜单_Excel – 如何始终显示下拉菜单右边的小箭头？
制作下拉菜单,不是什么高深的技巧,我在各种案例中也经常会用到. 如果要学习多级联动菜单的制作,可参见 Excel indirect 函数(2) – 制作多级联动菜单(文末彩蛋) 最近有同学提出了一个关 ...
Linux下MySQL的几种安装方式
闲来有空,整理下Linux下Mysql的几种安装方式,分别使用yum/rpm.常规方式编译安装.cmake方式编译安装以及使用二进制方式免编译安装MySQL Linux系统环境: CentOS rel ...
springboot读取linux文件_SpringBoot读取Resource下文件的几种方式
最近在项目中涉及到Excle的导入功能,通常是我们定义完模板供用户下载,用户按照模板填写完后上传:这里待下载模板位置为resource/excelTemplate/test.xlsx,尝试了四种读取方 ...
RocketMQ：两种消费方式：pull拉、push推
RocketMQ:两种消息消费方式:pull拉.push推 1.推送方式pull模式: 拉取,DefaultMQPullConsumer模式. 是由客户端主动向MQ请求数据,主动权在客户端,先拉取数据 ...
下拉菜单html菜鸟教程,Bootstrap 下拉菜单
Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您 ...
10款菜单导航代码_jquery 导航菜单_js 导航菜单_二级导航条下拉菜单（一）
jQuery左侧下拉导航菜单后台框架模板 js侧边隐藏菜单收缩特效黑色的左侧导航管理面板ui特效企业官网tab下拉菜单特效 Facebook自定义多级导航菜单查询 jQuery圆形转盘多级菜单代码 ...

html下拉菜单几种方式,html下拉菜单的实现方式

html下拉菜单几种方式,html下拉菜单的实现方式相关推荐

最新文章

热门文章