html下拉菜单栏代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS实现下拉菜单</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font:14px "Microsoft YaHei",sans-serif;
}
ul {
list-style: none;
}
.container {
margin: 0 auto;
width: 1000px;
}
.nav {
/*margin-top: 60px;*/
width: 100%;
height: 40px;
line-height: 40px;
background: #333;
}
/*一级菜单*/ /*该选择器会选择 所有li*/
.nav li {
float: left;
position: relative;
}
/*一级菜单*/
.nav li a {
/*因为a是内联元素*/
display: block;
width: 100px;
text-align: center;
color: #fff;
text-decoration: none;
}
/*二级菜单*/
.nav li ul li a {
color: #333;
}
.nav li ul li {
/*覆盖前面设置 */
float: none;
}
.nav li ul {
/*border: 1px solid #ccc;
border-top: none;*/
background: #fff;
/*二级菜单先隐藏*/
display: none;
/*绝对定位*/
position: absolute;
left:0;
top:;
}
/*划过那个li 哪个li就变红*/
.nav li:hover {
background: red;
}
.nav li:hover ul{
display: block;
}
/*设置banner*/
.banner img {
width: 100%;
}
</style>
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">博客</a>
<ul>
<li><a href="#">同志博客</a></li>
<li><a href="#">小同志博客</a></li>
<li><a href="#">老同志博客</a></li>
<li><a href="#">大同志博客</a></li>
</ul>
</li>
<li>
<a href="#">论坛</a>
<ul>
<li><a href="#">同志论坛</a></li>
<li><a href="#">红色论坛</a></li>
<li><a href="#">黄色论坛</a></li>
<li><a href="#">绿色论坛</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
<li>
<a href="#">举报我们</a>
<ul>
<li><a href="#">涉黄</a></li>
<li><a href="#">涉黑</a></li>
<li><a href="#">涉赌</a></li>
<li><a href="#">涉毒</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="banner">
<img src="../../dist/images_one/meinv02.jpg" alt="">
</div>
</body>
</html>
html下拉菜单栏代码的更多相关文章
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- zTree插件之多选下拉菜单代码
zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...
- Extjs下拉树代码测试总结
http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Ex ...
- js 导航栏多项点击显示下拉菜单代码
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...
- ListView(2)最简单的上拉刷新、下拉刷新代码
效果 最简单的上拉刷新和下拉刷新,当listview滚动到底部时向上拉刷新数据.当listview滚动到最顶部时下拉刷新. 图1,上拉刷新 图2,下拉刷新 1.设置lisview 加载he ...
- Excel制作多选下拉框代码以及图示
1.首先 点击Sheet1(需要显示多选框的页) ,然后右键查看代码,进入编辑界面 2.写入如下代码 Private Sub Worksheet_SelectionChange(ByVal Targ ...
- 小米网css3导航下拉菜单代码
效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...
- ad广告下拉收起代码
1. [代码][JavaScript]代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- zTree插件之单选下拉菜单代码
<!--ztree树结构--> <link rel="stylesheet" type="text/css" href="asset ...
随机推荐
- HDU 5877 Weak Pair DFS + 树状数组 + 其实不用离散化
http://acm.hdu.edu.cn/listproblem.php?vol=49 给定一颗树,然后对于每一个节点,找到它的任何一个祖先u,如果num[u] * num[v] <= k.则 ...
- Linux中vim编辑器的总结
vi( Visual Interface ) vim( VI iMproveed ):为纯文本(ASCII)全屏编辑器,也是模式化编辑器. vim的三种模式: 1)编辑模式(命令模式) 2)输入模式 ...
- mysql双主互备
mysql主从同步使得数据可以从一个数据库服务器复制到其他服务器上,在复制数据时,一个服务器充当主服务器(master),其余的服务器充当从服务器(slave),备服务器从主服务器同步数据,完成数据的 ...
- JDBC让java程序连上数据库(mysql数据库)
一.小论异常: 其实JDK已经提供了一组API让java程序连上数据库,并执行SQL语句,其实说起来也蛮简单的,但是绝对是一个细致活,因为稍不留神,异常就铺天盖地的来了,下面说说这些异常吧(声明一下: ...
- 《zabbix监控的搭建》centos5.8 32
系统环境centos5.8 32位操作系统 这里以zabbix-2.2.7为例: 下载官方的软件包: http://pan.baidu.com/s/1ntuTRYh 官方的参考文档: https: ...
- 使用data-自定义数据及如何获取该值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- vue-cli建立的项目如何在手机端运行以及如何用charles来抓包
刚开始自己在config文件夹下的index.js中的dev下的host写成的是localhost,但是发现自己不能在手机端访问,并且也不可以在charles进行抓包处理,后来把localhost改成 ...
- MySQL常用命令总结1
默认已成功安装并配置MySQL,以下命令全部在CMD命令行窗口(Win10平台)中进行输入: mysql -uusername -ppassword //登录MySQL MYSQL -V //查看My ...
- ARM实验1 —— 流水灯实验
实验内容: 编写GPIO模块程序,实现对FS_4412平台的上的led2,led3,led4 ,led5,的流水灯实现. 实验目的: 熟悉开发环境的使用. 掌握Exynos 4412处理器GPIO功能 ...