<!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下拉导航栏代码的更多相关文章

  1. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  2. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

  3. 一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

  4. 纯CSS下拉导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...

  5. 简单的CSS 下拉导航菜单实现代码

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...

  6. 38 个免费开源的 CSS 下拉导航菜单

    http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus

  7. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  8. 低版本系统兼容的ActionBar(三)自定义Item视图+进度条的实现+下拉导航+透明ActionBar

           一.自定义MenuItem的视图 custom_view.xml (就是一个单选按钮) <?xml version="1.0" encoding="u ...

  9. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

随机推荐

  1. BOF、EOF 属性

    BOF.EOF 属性 BOF 指示当前记录位置位于 Recordset 对象的第一个记录之前. EOF 指示当前记录位置位于 Recordset 对象的最后一个记录之后. 返回值 BOF 和 EOF  ...

  2. Centos 7.4 安装samba服务

    # See smb.conf.example for a more detailed config file or # read the smb.conf manpage. # Run 'testpa ...

  3. Linux下的文件操作——基于文件描述符的文件操作(1)

    概要: 打开.创建和关闭文件 读写文件 文件定位 获取文件信息 打开.创建和关闭文件 函数原型: #include <sys/types.h> //头文件 #include <sys ...

  4. [UE4]Set Skeletal Mesh,在蓝图中设置骨骼模型

  5. 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 ...

  6. 集群Redis使用 Python pipline大批量插入数据

    class myRedis(object):     def __init__(self,redis_type=None,**args):         if redis_type == " ...

  7. tf.nn.embedding_lookup

    tf.nn.embedding_lookup(params, ids, partition_strategy=’mod’, name=None, validate_indices=True, max_ ...

  8. css3属性兼容性

    来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...

  9. 通过创建临时表合并某一个库的hive小文件

    #!/bin/bash #需要指定hive中的库名 #set -x set -e DB=$1 if [ -z $1 ];then echo "Usage:$0 DbName" ex ...

  10. 动态添加布局、动态添加View、LinearLayout动态添加View;

    LinearLayout提供了几个方法,用作动态添加View特别好用: 可以添加View.删除View.删除指定位置View.删除全部View: 看代码: public class MainActiv ...