html+css二级菜单制作!
二级菜单!!<!DOCTYPE html<html lang="e<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.er{
width: auto;
background-color: antiquewhite;
}
a{
text-decoration: none;
}
.er ul{
width: 1200px;
height: 40px;
margin: auto;
text-align: center;
}
.er ul li{
position: relative;
width: 16%;
list-style: none;
float: left;
margin-top: 10px;
}
.er ul li ol{
position: absolute;
top: -100px;
height: 50px; list-style: none;
display: none; .er ul li ol li{
width: 100%;
}
ul li:hover ol{
position: absolute;
top: 20px; display: block; }
</style>
</head>
<body>
<div class="er">
<ul>
<li>
<a href="">首页</a>
<ol>
<li><a href="">第一页</a></li>
<li><a href="">第二页</a></li>
<li><a href="">第三页</a></li>
<li><a href="">第四页</a></li>
<li><a href="">第五页</a></li>
</ol>
</li </ul>
</div>
</body>
</html>
html+css二级菜单制作!的更多相关文章
- CSS二级菜单
0.需求:当鼠标hover到按钮上时,出现下拉菜单导航条. 1.问题拆解: (1)HTML应该如何组织比较方便合理 因为题中要求下拉菜单位于按钮的正下方,可以使用列表<li>中嵌套无序列表 ...
- JS+css滑动菜单简单实现
JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...
- crm 动态一级二级菜单
之前代码菜单是写是的 如何 让他 动态 生成了 首先 添加 2个字段 admin.py 更改 显示 from django.contrib import admin from rbac import ...
- [刘阳Java]_CSS普通菜单制作
简单给大家介绍一下CSS普通菜单制作,先看图 功能很简单 UL制作菜单 鼠标进入LI的CSS伪类,实现菜单弹出效果 源码如下 <!DOCTYPE html> <html> &l ...
- 个人练习:使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- CSS制作二级菜单时,二级菜单与一级菜单不对齐
效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul& ...
- 下拉菜单制作——利用CSS实现的一个实例
本文实现了一个经典的下拉菜单的制作. 首先,写出Html部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- jQuery - 制作点击显示二级菜单效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- lamp centos虚拟主机配置
1.基于不同端口的虚拟主机配置 [root@lamp~]# vi /etc/httpd/conf/httpd.conf Listen 80 #设置监听不同的虚拟主机需要使用的端口 Liste ...
- .ipynb文件 与ipython notebook
没有安装ipython notebook 后看见.ipynb文件直接手足无措了 一.安装ipython notebook 使用命令 pip ipython [all] 为所有用户安装 ipython ...
- Mysql 中有关日期的函数(sql)
DAYOFWEEK(date)返回日期date的星期索引(1=星期天,2=星期一, ……7=星期六).这些索引值对应于ODBC标准.mysql> select DAYOFWEEK('1998-0 ...
- [http session]
原文链接:http://lavasoft.blog.51cto.com/62575/275589/ 1.Session创建的时间是: 一个常见的误解是以为session在有客户端访问时就被创建,然而事 ...
- json 后台传前台
jsonObject需实例化new.jsonObject=new JSONObject();jsonObject.put("goodslist", list);jsonObject ...
- mac下使用brew安装ffmpeg支持x265
使用brew install ffmpeg 安装ffmpeg默认是没有支持x265的, 使用brew info ffmpeg 获取安装选项帮助, 使用brew reinstall ffmpeg --w ...
- 【matlab】膨胀
clear all;close all; BW=zeros(9,10); BW(4:6,4:7) =1 imshow(BW) hold on SE=strel('square',3) BW2=imdi ...
- Centos6 使用yum安装 mysql 5.7
直接使用yum安装默认安装的是mysql 5.1版本,要想安装mysql 5.7 需要设置yum源 1.检查系统默认mysql,并删除 yum list installed | grep mysql ...
- shell中&&和||的使用方法
测试题: [ -z "" ] && echo 0 || echo 1 的结果是多少 看看这两个 && || 的用户 http://blog.csd ...
- java日期操作大全
摘自(http://www.blogjava.net/i369/articles/83483.html) java日期操作 大全 先来一个: 取得指定月份的第一天与取得指定月份的最后一天 http ...