二级菜单!!<!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二级菜单制作!的更多相关文章

  1. CSS二级菜单

    0.需求:当鼠标hover到按钮上时,出现下拉菜单导航条. 1.问题拆解: (1)HTML应该如何组织比较方便合理 因为题中要求下拉菜单位于按钮的正下方,可以使用列表<li>中嵌套无序列表 ...

  2. JS+css滑动菜单简单实现

    JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...

  3. crm 动态一级二级菜单

    之前代码菜单是写是的 如何 让他 动态 生成了  首先 添加 2个字段 admin.py 更改 显示 from django.contrib import admin from rbac import ...

  4. [刘阳Java]_CSS普通菜单制作

    简单给大家介绍一下CSS普通菜单制作,先看图 功能很简单 UL制作菜单 鼠标进入LI的CSS伪类,实现菜单弹出效果 源码如下 <!DOCTYPE html> <html> &l ...

  5. 个人练习:使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  6. CSS制作二级菜单时,二级菜单与一级菜单不对齐

    效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul& ...

  7. 下拉菜单制作——利用CSS实现的一个实例

    本文实现了一个经典的下拉菜单的制作. 首先,写出Html部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  8. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 纯css实现鼠标感应弹出二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 初学者用div+css结构写网页的几个误区

    1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...

  2. express-generator安装时出错,最后用VPS解决

    npm install -g express-generator npm ERR! Linux 3.10.0-229.el7.x86_64npm ERR! argv "/usr/local/ ...

  3. ASP.NET MVC电子书下载

    欢迎点击图片下载电子书,进行深入的研究.                (  ,)      

  4. Gradient Boost Decision Tree(GBDT)中损失函数为什么是对数形式

    由于最近要经常用到XGBOOST的包,不免对相关的GBDT的原理又重新学习了一遍, 发现其中在考虑损失函数的时候,是以对数log进行度量的,囿于误差平方和函数的印象 那么为什么是对数呢?可能是下面的原 ...

  5. Android开发--Layout元素

    1.TF类型 android:layout_alignParentStart="true/flase":贴紧父元素的左边缘 android:layout_alignParentEn ...

  6. 在chrome console加入jquery库

    var jq = document.createElement('script'); jq.src = 'http://libs.baidu.com/jquery/1.9.1/jquery.min.j ...

  7. 新版Chrome自动禁用第三方插件的解决办法[转]

    原文地址:http://www.douban.com/note/375734834/?type=like Chrome的新策略里面禁用了除chrome web store下载的所有第三方扩展,这个很烦 ...

  8. String课后作业

    请查看String.equals()方法的实现代码,注意学习其实现方法. public class StringEquals { @param args the command line argume ...

  9. net 的单元测试 初学

    1. 都要以一个方法 这样的去测试 2. 利用工具 Install-Package Moq -Version 4.0 (最高的是4.5  4.0适用于自己项目的版本)   Moq.dll 进行测试   ...

  10. Linux提供两个格式化错误信息的函数

    #include “stdio.h” Void perror(__const char *__s); 其中__s是出现错误的地方,函数向标准错误输出设备输出如下:s:错误的详细信息. Eg.perro ...