css下拉导航栏代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--<link href="test3.css" rel="stylesheet" type="text/css"/>-->
<style type="text/css">
* {
margin: 0px;
padding: 0px
}
section {
background: #;
color: #E9E9E9
}
a {
text-decoration: none;
color: #55e5e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
nav {
width: 400px;
height: 60px;
margin: auto;
color: #;
}
ul, li {
list-style-type: none
}
nav>ul >li {
float: left;
position: relative;
}
nav>ul >li >a {
display: block;
padding: 20px 0px;
width: 80px;
text-align: center;
border-right: 1px solid #e9e9e9;
}
.subnav {
display: none;
}
nav>ul>li:hover {
background: #12aeef;
}
nav>ul>li:hover .subnav {
display: block;
position: absolute;
margin-top: 1px
}
.subnav a {
display: block;
background-color: #12aeef;
color: #FFFFFF;
border-bottom: 1px solid #f2f2f2;
width: 100px;
text-align: center;
}
.subnav a:hover {
background: #6dc7ec;
}
</style>
</head> <body>
<header>
<nav>
<ul>
<li><a href="#">Home</a>
<ul class="subnav">
<li><a href="#">Home1</a></li>
<li><a href="#">Home2</a></li>
<li><a href="#">Home3</a></li>
</ul>
</li>
<li><a href="#">About Me</a>
<ul class="subnav">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
<section>
<article>
<div> Nav test </div>
</article>
</section>
</body>
</html>
css下拉导航栏代码的更多相关文章
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
- 通过html和css做出下拉导航栏的效果
通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...
- 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏
一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...
- 纯CSS下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...
- 简单的CSS 下拉导航菜单实现代码
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...
- 38 个免费开源的 CSS 下拉导航菜单
http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- 低版本系统兼容的ActionBar（三）自定义Item视图+进度条的实现+下拉导航+透明ActionBar
一.自定义MenuItem的视图 custom_view.xml (就是一个单选按钮) <?xml version="1.0" encoding="u ...
- 华丽导航CSS下拉菜单特效
华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...
随机推荐
- BOF、EOF 属性
BOF.EOF 属性 BOF 指示当前记录位置位于 Recordset 对象的第一个记录之前. EOF 指示当前记录位置位于 Recordset 对象的最后一个记录之后. 返回值 BOF 和 EOF ...
- Centos 7.4 安装samba服务
# See smb.conf.example for a more detailed config file or # read the smb.conf manpage. # Run 'testpa ...
- Linux下的文件操作——基于文件描述符的文件操作(1)
概要: 打开.创建和关闭文件 读写文件 文件定位 获取文件信息 打开.创建和关闭文件 函数原型: #include <sys/types.h> //头文件 #include <sys ...
- [UE4]Set Skeletal Mesh，在蓝图中设置骨骼模型
- psql: could not connect to server: No such file or directory&&PGHOST
由于环境变量 PGHOST配置不当引起的 postgres@pgdb-> psql psql: could not connect to server: No such file or dire ...
- 集群Redis使用 Python pipline大批量插入数据
class myRedis(object): def __init__(self,redis_type=None,**args): if redis_type == " ...
- tf.nn.embedding_lookup
tf.nn.embedding_lookup(params, ids, partition_strategy=’mod’, name=None, validate_indices=True, max_ ...
- css3属性兼容性
来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...
- 通过创建临时表合并某一个库的hive小文件
#!/bin/bash #需要指定hive中的库名 #set -x set -e DB=$1 if [ -z $1 ];then echo "Usage:$0 DbName" ex ...
- 动态添加布局、动态添加View、LinearLayout动态添加View；
LinearLayout提供了几个方法,用作动态添加View特别好用: 可以添加View.删除View.删除指定位置View.删除全部View: 看代码: public class MainActiv ...