<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>导航菜单</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
width: 1000px;
margin: 150px auto 0px;
}
li {
float: left;
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
color: white;
position: relative;
background-color: rgb(79, 128, 109);
}
.item2 {
display: none;
position: absolute;
left: 0px;
top: 35px;
height: 0px;
width: 100px;
background-color: blue;
}
a {
color: gray;
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li>
<div class="item1">菜单一</div>
<div class="item2">
<a href="">菜单一一</a><br />
<a href="">菜单一二</a><br />
<a href="">菜单一三</a><br />
</div>
</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
<li>菜单五</li>
<li>菜单六</li>
<li>菜单七</li>
<li>菜单八</li>
<li>菜单九</li>
<li>菜单十</li>
</ul>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$('li').hover(function(){
$('.item2').css('display', 'block');
$('.item2').animate({height : "110px"});
}, function(){
$('.item2').animate({height : "0px"}, function(){
$('.item2').css('display', 'none');
});
});
</script>
</body>
</html>
相关推荐
NULL 博文链接：https://hotstrong.iteye.com/blog/1004357
《CSS从入门到精通》共分为四篇，循序渐进的讲述了网页基础知识和CSS布局的实战技术，从基本概念到具体实践、从对网页的认识到制作网页、从使用CSS进行网页局部的设计到进行整个网站的布局制作都进行了详细的阐述，...
(1)浮动 : - 缺点 :浮动是脱离文档流的，有些时候需要清除浮动，需要很好的处理浮动周边元素的关系 - 优点 :兼容性比较好 ... - 新技术，CSS3下一代局部方案 2、如果去掉"高度已知"， 以上哪种方案同样适用？
HTML5 CSS3版本的瀑布流布局实例，好像目前很流行这种图片布局的方式，局部看上去很零乱，但整体看上去很自然。CSS3版本的图片瀑布流可很好的应用于手机APP中，当然本示例是在PC端，两者均有很好的表现。 本瀑布...
有实用说明，布局符合W3C标准，采用局部刷新Ajax,三层架构，稳定性高，开发语言c#，数据库Sql Server，不管是新手还是有开发经验的同学，都是帮助你提高和走向标准化之路的好帮手，本人资源信誉保障，因为这个很不错...
实验内容：1.CSS的引入和基本选择器应用;...3.利用DIV+CSS实现如图2-3、2-4网页效果的布局和设计，并在多种浏览器上测试。所需图片见附件。4.利用DIV+CSS实现如图2-5网页效果，并在多种浏览器上测试。所需素材见附件。
搞前端的同学可能都习惯了CSS局部的思维，过去也出现过一些跟布局或者样式相关的标签，例如：big,center,font,s,strike,tt,u；但是目前也被CSS所代替，已经不推荐使用。但是在Flutter里面，是没有CSS这样一个概念的...
web客户端开发与应用课件，包含以下知识点： ...4、表单基本验证技术 5、函数与Windows对象 6、BOM编程 7、DOM高级编程 8、表格的使用 9、javascript的基本语法 ...15、指导学习：活动页的局部布局 16、贵美商城（一）
由于Dsure是专门针对DS产品和国内/外兼容性灵活建站的开源框架，固暂不提供局部式框架独立包下载，以免造成效果错位。如果您喜欢，可以直接下载完全包，保证您开发功能的齐全。 特色： 兼容IE6 , Firefox, ...
纯网格布局该项目是一个完整的 Visual Studio 2013 解决方案，演示了如何将与结合起来。 它带有一个 SQL CE 数据库，所以它应该在下载后运行。包括什么包含以下内容： 2 纯网格数据类型2 纯网格局部视图Visual ...
练习网页元素在实际应用中的使用，包含文字与段落涉及的图文混排方式、列表涉及的导航制作、框架涉及的后台管理页面制作、表格布局局部页面等。练习div+css的页面布局。javascript在交互式网页开发中的基本应用。...
比如小米商城局部布局如下： 不难发现，一些电商平台的布局基本上大同小异，最普遍的还是这种九宫格布局。当然通过CSS也可以对其单独设置定位，但是数据量小还好说，如果数据量多起来，计算麻烦不说，还有可能...
设计一个网站，网站结构是所有页面都引入header.html...页面的整体布局和样式统一用div+css，局部布局根据具体页面可以采用不同的布局方式。 logo、导航、带会员注册js验证用户名、密码、邮箱 写的作业，需要拿走。
将您的twig源json文件放在此处-与该twig文件同名，但.json 字体：您的自定义字体images ：您的图像，但应编译为精灵的图像除外布局：建议作为树枝布局的文件夹-您可以重命名它，但布局不能位于根目录级别局部变量：...
/css/tree.css CSS样式表文件 /js/all.js JavaScript脚本文件 /images 图片文件 第24章（/ch24） 程序描述：本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时，自动保存...
| --assets【变量图片文件以及css样式】 |-401_images【403图片配置内容】 |-404_images【404图片配置内容】 | --css【全局css样式】 | --img【变量图片】 | --components【插件】 | --common【局部插件存放（排列...
这套源码相对于现在网络上的其他... 网站前台使用html5 CSS3局部，非常符合现在的流行设计方案，对于网站的移动化及网站自适配也有很大的好处，希望给自己公司支持营销型网站的朋友可以下载下来研究一下，如果你是涂料
02-使用富文本： 记录vue技术栈相关的 框架 组件库 插件 文章 博客 教学视频 ...局部挂载： src/views/publish/index.vue import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/di