<!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. 客户端负载均衡Feign之二：Feign 功能介绍

    一.Ribboon配置 在Spring cloud Feign中客户端负载均衡是通过Spring cloud Ribbon实现的,所以我们可以直接通过配置Ribbon客户端的方式来自定义各个服务客户端 ...

  2. Git revert及其他一些回退操作

    放弃本地的代码和本地提交,希望会退到远程分支的某次提交时,使用git reset --hard fa042ce. 本地已提交,但是发现有问题,想要撤销本地的提交,使用git checkout /trs ...

  3. go语言学习--channel的关闭

    在使用Go channel的时候,一个适用的原则是不要从接收端关闭channel,也不要在多个并发发送端中关闭channel.换句话说,如果sender(发送者)只是唯一的sender或者是chann ...

  4. Java项目部署服务器操作

    有 2个工具需要下载,我使用的是 xshell(操作Linux命令),xftp5(操作文件传输) 需要知道服务器 ip ,账号,密码 xshell连接时,协议选择SSH连接,其他正常输入. xftp5 ...

  5. 0002 - Spring MVC 拦截器源码简析：拦截器加载与执行

    1.概述 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求信息的日 ...

  6. RHEL7安装图像化桌面

    RHEL7安装图像化桌面 作者:Eric 微信:loveoracle11g 在安装系统的时候选择的是默认的Minimal Install RHEL7系统安装完成开机启动后发现没有图形化 Linux系统 ...

  7. （转）开源OpenWRT知识

    原博地址:http://www.thinkingquest.net/article/466 我们都需要使用google提供的搜索,gmail等优质服务.但是由于方墙的存在,使得大家各自搞各自的FQ办法 ...

  8. 通过OTA的方式在局域网分发iOS应用

    公司的一个项目有Android和iOS的app,Android的下载和安装都很方便,不过iOS有些麻烦,因为项目本身有些限制,主要有以下一些障碍:1.iOS的版本不是通过Appstore分发.2.出于 ...

  9. 网络编程socket，详细讲述osi七层协议

    一 网络编程 源方: 我们首先来说下数据在两台计算机之间的传递:操作系统控制着除应用层以外的四层 对于用户来说我们发数据一般都是在应用层,也就是我们是直接操作应用软件的,那么应用层要把数据传给传输层就 ...

  10. python连接RabbitMQ

    安装PIP wget "https://pypi.python.org/packages/source/p/pip/pip-1.5.4.tar.gz tar -xzvf pip-.tar.g ...