html下拉菜单的实现
这是简单的下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript下拉菜单</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} body {
font-family: verdana, sans-serif;
font-size: small;
} #navigation, #navigation li ul {
list-style-type: none;
} #navigation {
margin: 20px;
} #navigation li {
float: left;
text-align: center;
position: relative;
} #navigation li a:link, #navigation li a:visited {
display: block;
text-decoration: none;
color: #000;
width: 120px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #c5dbf2;
padding-left: 10px;
} #navigation li a:hover {
color: #fff;
background: #2687eb;
} #navigation li ul li a:hover {
color: #fff;
background: #6b839c;
} #navigation li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
margin-top: 1px;
width: 120px;
} #navigation li ul li ul {
display: none;
position: absolute;
top: 0px;
left: 130px;
margin-top: 0;
margin-left: 1px;
width: 120px;
}
</style>
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<!-- style="display:inline-block;"-->
<div style="border: 3px solid red;">
<ul id="navigation">
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目1</a>
<ul>
<li><a href="#">栏目1->菜单1</a></li>
<li><a href="#">栏目1->菜单2</a></li>
<li><a href="#">栏目1->菜单3</a></li>
<li><a href="#">栏目1->菜单4</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目2</a>
<ul>
<li><a href="#">栏目2->菜单1</a></li>
<li><a href="#">栏目2->菜单2</a></li>
<li><a href="#">栏目2->菜单3</a></li>
<li><a href="#">栏目2->菜单4</a></li>
<li><a href="#">栏目2->菜单5</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目3</a>
<ul>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目3->菜单1</a>
<ul>
<li><a href="#">菜单1->子菜单1</a></li>
<li><a href="#">菜单1->子菜单2</a></li>
<li><a href="#">菜单1->子菜单3</a></li>
<li><a href="#">菜单1->子菜单4</a></li>
</ul>
</li>
<li><a href="#">栏目3->菜单2</a></li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目3->菜单3</a>
<ul>
<li><a href="#">菜单3->子菜单1</a></li>
<li><a href="#">菜单3->子菜单2</a></li>
<li><a href="#">菜单3->子菜单3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
html下拉菜单的实现的更多相关文章
- 初学者--bootstrap（六）组件中的下拉菜单----在路上（10）
组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...
- Bootstrap3系列：按钮式下拉菜单
1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...
- Bootstrap3系列：下拉菜单
1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...
- 如何在webapp中做出原生的ios下拉菜单效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
- Html5+Css3制作下拉菜单的三种方式
一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...
- IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）
********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...
- JS实现带复选框的下拉菜单
这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
- 超简洁的CSS下拉菜单
效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...
随机推荐
- UML 类关系及画法
1 泛化 [泛化关系]:是一种继承关系,表示一般与特殊的关系,它指定了子类如何特化父类的所有特征和行为.例如:老虎是动物的一种,即有老虎的特性也有动物的共性. [箭头指向]:带三角箭头的实线,箭头指向 ...
- Axure 全局辅助线(转)
普通辅助线作用于当前页 全局作用于所有页面 , 包括新建页面 创建普通辅助线直接拉出来 创建全局辅助线 , 在拉出来的时候按住 Ctrl 默认情况下 , 颜色不同 辅助线可以多选 , 用拖选 或 按 ...
- Android：dimen尺寸资源文件的使用(转)
为了适配不同的分辨率. dimen.xml在values文件夹下面 <resources> <!-- Default screen margins, per the Android ...
- WCF服务寄宿应用程序
1.先创建一个WCF服务库 2.创建一个Console控制台,服务将寄宿在该应用程序上,该程序一旦关闭,服务将停止. 控制台代码: using System; using System.Collect ...
- ADT开发AndroidManifest.xml file missing错误
一个错误“AndroidManifest.xml file missing”但helloworld目录下有此文件,几番google仍没能解决.想起曾经在网络上看到的一个修复project的办法,抱着死 ...
- 【java 上传+下载】
一.先说说上传 第一步:pom.xml文件 加上 上传文件依赖架包 <dependency> <groupId>commons-fileupload</groupId&g ...
- Android学习系列(38)--Android源码下载和编译
前面多篇文章介绍到如何下载和编译Android或者CM源码,不过一直都是放在<拓展系列>里.随着学习的深入,android源码是非常有参考和学习价值,强烈推荐大家都去下载,编译,学习,所以 ...
- 手持终端PDA应用固定资产管理系统（资产查询 盘点）软件程序系统
一.产品概述 固定资产管理系统,是针对企事业单位内部资产管理中出现的工作量大.过程繁琐.追踪困难等一系列难题开发的一套先进管理软件.软件实现了对资产的多种方式管理,目前包括条形码.二维码.RFID管理 ...
- [xsd学习]xsd基本要素
一.xsd常用数据格式 xs:string xs:decimal xs:integer xs:boolean xs:date xs:time 二.简易元素 <xs:element name=&q ...
- ios开发学习笔记（这里一定有你想要的东西，全部免费）
1,Search Bar 怎样去掉背景的颜色(storyboard里只能设置background颜色,可是发现clear Color无法使用). 其实在代码里还是可以设置的,那就是删除背景view [ ...