CSS:导航栏下拉菜单模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0px;
padding: 0px;
}
.nav{
width: 500px;
height: 46px;
position: absolute;
top: 0px;
left: 0px;
z-index: 900;
}
.nav-title{
width: 100px;
max-height: 46px;
text-align: center;
line-height: 46px;
float:left;
background-color: #018b3e;
font-size: 20px;
overflow: hidden;
transition: 0.5s;
}
.nav-title:hover{
background-color:#ff6b00;
cursor: pointer;
max-height: 500px;
}
.nav-title ul{
list-style:none;
}
.nav-title li{
background-color:red;
}
.nav-title li:hover{
cursor: pointer;
background-color:rosybrown;
}
.content{
width: 500px;
height: 500px;
margin-top: 46px;
position: absolute;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-title">FF
<ul>
<li>div</li>
<li>span</li>
<li>img</li>
<li>pr</li>
<li>body</li>
</ul>
</div>
<div class="nav-title">HTML
<ul>
<li>div</li>
<li>span</li>
</ul>
</div>
<div class="nav-title">CSS
<ul>
<li>div</li>
<li>span</li>
<li>img</li>
</ul>
</div>
<div class="nav-title">.NET
<ul>
<li>div</li>
</ul>
</div>
<div class="nav-title">JAVASCRIPT
<ul>
<li>div</li>
<li>span</li>
<li>img</li>
<li>pr</li>
</ul>
</div>
</div>
<div class="content">
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
</div>
</body>
</html>
CSS:导航栏下拉菜单模板的更多相关文章
- 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
- Css之导航栏下拉菜单
Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- 织梦DedeCMS v5.7 实现导航条下拉菜单
首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- Bootstrap历练实例:导航内下拉菜单的用法
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 更改SharePoint 2010 顶部导航为下拉菜单样式
更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...
- CSS写动态下拉菜单 -----2017-03-27
动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...
随机推荐
- BugkuCTF解题Web基础(一)
Web2 打开链接看见一张动图,猜测flag应该就在网页前端源码里面 没有问题 计算器 典型的修改前端代码题目,题目让你计算结果,但只能填写一位数字. f12打开控制台,改代码maxlength we ...
- 循环读取寄存器(QSFP-DD)并且分别保存log
#!/bin/bash ####################################################################### #Created by: Bin ...
- 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素
CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...
- ArcMap中对失量数据将具有相同的字段的元素进行合并
ArcMap=>工具栏=>Geoprocessing=>Dissolve,由于是将多个元素进行合并,所以还涉及到合并后的元素的字段保留以及字段取值的问题,在该工具中还可以自定义保存的 ...
- 使用tag标签是SEO优化的重要性是什么?
使用tag标签是SEO优化的重要性是什么? tag标签是一种SEO技术,在网站优化的过程中,更准确.更具体地用关键词对文章进行分类,对SEO优化具有重要的作用. 但是,很多新人站长在发表文章时不太注意 ...
- Linux命令:grep命令 | egrep命令
grep:文本搜素工具,根据用户指定的文本模式对目标文件进行逐行搜索,显示能被模式所匹配到的行 包含三个命令:grep.egrep(相当于grep -E 扩展的正则表达式)和fgrep(相当于grep ...
- MD5摘要
MD5简介 MD5即Message-Digest Algorithm 5(信息-摘要算法),属于摘要算法,是一个不可逆过程,就是无论多大数据,经过算法运算后都是生成固定长度的数据,结果使用16进制进行 ...
- luogu P4013 数字梯形问题
三倍经验,三个条件,分别对应了常见的3种模型,第一种是限制每个点只能一次且无交点,我们可以把这个点拆成一个出点一个入点,capacity为1,这样就限制了只选择一次,第二种是可以有交点,但不能有交边, ...
- 设计模式课程 设计模式精讲 2-4 UML类图讲解 对比讲解 demo
1 主要内容 1.1 关联和依赖的对比 1.2 组合和聚合的对比 1.3 继承和实现的对比 1.4 各种关系代码实现demo 1 主要内容 1.1 关联和依赖的对比 关联是a类中存在b类对象,企鹅类中 ...
- FTP的vsftpd.conf含义
# 设置为YES时vsftpd以独立运行方式启动,设置为NO时以xinetd方式启动 #(xinetd是管理守护进程的,将服务集中管理,可以减少大量服务的资源消耗) listen=YES # 同上,如 ...