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/ ...
随机推荐
- 初学者用div+css结构写网页的几个误区
1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...
- express-generator安装时出错,最后用VPS解决
npm install -g express-generator npm ERR! Linux 3.10.0-229.el7.x86_64npm ERR! argv "/usr/local/ ...
- ASP.NET MVC电子书下载
欢迎点击图片下载电子书,进行深入的研究. ( ,)
- Gradient Boost Decision Tree(GBDT)中损失函数为什么是对数形式
由于最近要经常用到XGBOOST的包,不免对相关的GBDT的原理又重新学习了一遍, 发现其中在考虑损失函数的时候,是以对数log进行度量的,囿于误差平方和函数的印象 那么为什么是对数呢?可能是下面的原 ...
- Android开发--Layout元素
1.TF类型 android:layout_alignParentStart="true/flase":贴紧父元素的左边缘 android:layout_alignParentEn ...
- 在chrome console加入jquery库
var jq = document.createElement('script'); jq.src = 'http://libs.baidu.com/jquery/1.9.1/jquery.min.j ...
- 新版Chrome自动禁用第三方插件的解决办法[转]
原文地址:http://www.douban.com/note/375734834/?type=like Chrome的新策略里面禁用了除chrome web store下载的所有第三方扩展,这个很烦 ...
- String课后作业
请查看String.equals()方法的实现代码,注意学习其实现方法. public class StringEquals { @param args the command line argume ...
- net 的单元测试 初学
1. 都要以一个方法 这样的去测试 2. 利用工具 Install-Package Moq -Version 4.0 (最高的是4.5 4.0适用于自己项目的版本) Moq.dll 进行测试 ...
- Linux提供两个格式化错误信息的函数
#include “stdio.h” Void perror(__const char *__s); 其中__s是出现错误的地方,函数向标准错误输出设备输出如下:s:错误的详细信息. Eg.perro ...