<!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. spring4.0之一：简介

    我们共同来构建更好的企业应用.Spring帮助全世界的开发团队构建简单.便携.快速和灵活的基于JVM的系统和应用.这两句话已经足以说明Spring的目标,它针对的领域是企业应用,这套框架构建的应用有着 ...

  2. 拓扑试验划分简单的静态VLAN

    拓扑图 说明: 把交换机连接到PC机的网口类型设置成为access 把交换机与交换机之间的网口类型设置成为truck 然后再给交换机每一个接口划分VLAN 操作如下: 交换机LSW1的配置: 进入输入 ...

  3. static--Android静态变量使用陷阱

     相关资料:http://blog.csdn.net/ctcwri/article/details/8858414                     http://blog.csdn.net/w ...

  4. 解决在word中不能使用输入法

    打开一个Word文档-------------->单击 文件---->选项---->高级---->取消什么?看图 然后重新启动word

  5. CentOS之正则表达式

    支持linux正则表达式的工具有:grep:实现查找,sed,awk:都是流式编辑器,可以实现查找和替换,并且把替换的文本输出到屏幕上. grep工具 grep [-cinvABC] 'word' - ...

  6. CentOS之Vim

    安装  yum install -y vim-enhanced 移动光标 h或者向左的方向键:光标向左移动一个字符 l或者向右的方向键:光标向右移动一个字符 j或者向下的方向键:光标向下移动一个字符 ...

  7. Maven安装以及环境配置（Windows）

    Maven是什么? Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生命周期框架.开发团队可以自动完成项目的基础工具建设,Maven使用标准的目录结构和默认构建生命周期. 在 ...

  8. delphi2010 域名转换IP

    uses winsock; function GetHostIp_wwwdelphitopcom(HostName: string): string; type   tAddr = array[0.. ...

  9. 把Excel选手名单信息导入到评委计分软件Access数据库的步骤

    第一步:用Excel制作选手名单 根据比赛要求,制作选手Excel名单信息,前4列要符合要求 A列:比赛顺序,整数数值类型.所以A列数值选中后,右击设置单元格格式 数字/数值/小数位数为0(见下图). ...

  10. css实战——第一天

    1.  开发前的准备 1.1配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 1.2建立项目文件夹 主页或是首页    index.html   d ...