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 ...
随机推荐
- linux SecureCRT ssh key认证登陆
转自:http://blog.chinaunix.net/uid-20639775-id-3207171.html 通过SecureCRT创建key登录认证 一.生成公钥/密钥对 使用SecureCR ...
- 信号量进程同步,王明学learn
信号量进程同步 一组并发进程进行互相合作.互相等待,使得各进程按一定的顺序执行的过程称为进程间的同步. 信号量在进程同步时初始值为:0 信号量在进程互斥时初始值为:大于0的 本章节主要使用信号量,使的 ...
- HTML meta viewport属性说明(mark)
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手 ...
- Android 中常用的布局
一.线性布局----LinearLayout horizontal 水平 <?xml version="1.0" encoding="utf-8"?& ...
- poj1222 EXTENDED LIGHTS OUT 高斯消元||枚举
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8481 Accepted: 5479 Description In an ...
- hdu 2102 A计划-bfs
Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
- 【CLR in c#】属性
1.无参属性 1.为什么有字段还需要属性呢? 因为字段很容易写出不恰当的代码,破坏对象的状态,比如Age=-1.人的年纪不可能为负数.使用属性后你可以缓存某些值或者推迟创建一些内部对象,你可以以线程安 ...
- BestCoder Round #72 (div.2)
后面的题目补不懂了 暴力 1001 Clarke and chemistry 这题也把我搞死了..枚举系数判断就行了 #include <cstdio> #include <algo ...
- Wordpress如何开启用户注册功能
登录你的Wordpress管理员帐号,并进入管理后台,点击左侧菜单栏的"设置"--"常规" 在打开的设置页面,下方找到"允许任何人注册" ...
- tidyr包--数据处理包
tidyr包的作者是Hadley Wickham.这个包常跟dplyr结合使用.本文将介绍tidyr包中下述四个函数的用法: gather—宽数据转为长数据.类似于reshape2包中的melt函数 ...