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 ...
随机推荐
- 禁用thinkpad触摸板的方法
控制面板----硬件和声音----设备和打印机----鼠标----ThinkPad------开启触摸板(前面的勾勾去掉)
- Eventlet Greenlet
Eventlet是一个用来处理和网络相关的python网络库,而且可以通过协程来实现并发,在eventlet里,把“协程”叫做greenthread. 所谓并发,就是开启了多个greenthread, ...
- Hive 基本语法操练（三）：分区操作和桶操作
(一)分区操作 Hive 的分区通过在创建表时启动 PARTITION BY 实现,用来分区的维度并不是实际数据的某一列,具体分区的标志是由插入内容时给定的.当要查询某一分区的内容时可以采用 WHER ...
- arch搭建SVN服务器
一.安装 Install the package Install subversion from the official repositories. Create a repository Crea ...
- Docker创建Centos踩出来的坑
屁话不多说,先来一遍正常的流程 1.下载centos镜像 # docker pull centos 2.运行容器,修改镜像 2.1 运行 # docker run -itd --name centos ...
- Apache禁止访问网站子目录的方法
在PHP网站开发中,基于WEB服务器和PHP网站程序代码的安全考虑,我们需要对相关的目录或者文件访问权限进行控制,以防止意外情况的发生,那么我们如何来实现这种功能呢?我们可以通过Apache来实现禁止 ...
- js 和C# ashx之间数组参数传递问题
js在进行ajax提交时,如果提交的参数是数组,js无法直接进行提交,及时提交上去,解析也是比较麻烦 ajax在提交数组时,需要设置参数: traditional: true, //参数作为数组传 ...
- Java基础重点指南
Java基础重点指南 每个人都有自己的学习方法,下面是我学完Java后总结的一些要点: 一:(了解)Java诞生于1995年,由Sun公司开发.它把源代码编译成“中间码”,然后通过“Java虚拟机”把 ...
- textArea 默认添加的空格
1.会莫名多出一些空格(标签闭合换行了) <textarea class="borderstyle width97b height75" name="SmsTax. ...
- WPF动画的几种模式
最近在用WPF做简单动画,以下是几点经验总结: 1. 使用DispatcherTimer做动画 VB6的年代大家就用Timer做动画了,不用多解释,这个DispatcherTimer和本身的Timer ...