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: ...
随机推荐
- 【原】postman设置环境变量和全局变量
一:设置环境变量 1. postman通过变换环境变量来快速变换环境地址. 2. 现可以将localhost:80信息添加至环境 3. 点击确定后,在首页可看到已添加的环境变量信息及设置的变量信息: ...
- 【PAT甲级】1008 Elevator (20 分)
题意: 电梯初始状态停在第0层,给出电梯要接人的层数和层序号,计算接到所有人需要的时间,接完人后电梯无需回到1层(1层不是0层).电梯上升一层需要6秒,下降一层需要4秒,接人停留时间为5秒. AAAA ...
- linux#自启动脚本
编写脚本: /etc/init.d/myscriptname # chkconfig: # description: 描述信息,描述信息,上面的90表示在众多开机启动脚本的优先级,10表示在众多关机启 ...
- Java 对不同类型的数据文件的读写操作整合器[JSON,XML,CSV]-[经过设计模式改造](2020年寒假小目标03)
日期:2020.01.16 博客期:125 星期四 我想说想要构造这样一个通用文件读写器确实不容易,嗯~以后会添加更多的文件类型,先来熟悉一下文件内容样式: <?xml version=&quo ...
- Kali aircrack-ng wifi密码破解(暴力)
1.kali linux安全渗透 2.工具aircrack-ng 3.ifconfig查看你的网卡信息,wlan0即无线网卡,注意,如果没有发现网卡可能是芯片不能被识别,建议选择网卡芯片为3037或r ...
- css选择器优先级排序
浏览器默认属性 < 继承自父元素的属性 < 通配符选择器 < 标签选择器 < 类选择器 < 结构伪类选择器 < id选择器 < 行内样式 < !impo ...
- Spring和SpringMVC的直接
1.Spring的常用注解 2.SpringMVC的常用注解
- Hadoop操作经验
系统日志文件写入到MySQL中,NoSQL中一般存储独立的关联性不大的非业务数据. 单个NameNode也可以恢复,从SecondaryNameNode恢复:两个NameNode是可以做负载均衡:更高 ...
- vue 项目上传到码云,push时error: failed to push some refs to 'https://gitee.com/mawenrou/vue_ht.git'
vue 项目上传到码云,push时error: failed to push some refs to 'https://gitee.com/mawenrou/vue_ht.git' 因为之前已经创建 ...
- java学习-初级入门-面向对象⑥-类与对象-静态static
这次我们来学习静态(static) 知识点 1.静态方法只能调用静态变量 2.静态变量属于整个Class,会随着发生变化. 案例:定义一个自动增长的学生类. 题目要求: 定义一个学生类,除了姓名.性别 ...