<!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. [转][PowerShell]ps执行重启IIS

    来自:https://www.aliyun.com/jiaocheng/871477.html write-output 'Restarting IIS servers ............... ...

  2. 廖雪峰Java4反射与泛型-1反射-4调用构造方法

    1.Class.newInstance()只能调用public的无参数构造方法 public class Main { public static void main(String[] args) t ...

  3. int, bool, string的操作

    基本数据类型 1.int型 可以求整数的二进制长度.输入一个数字a,"a.bit_length()"语法求a的二进制长度. a = 3 #二进制为11 print(a.bit_le ...

  4. 您无法登陆系统。原因可能是您的用户记录或所属的业务部门在Microoft Dynamics CRM中已被禁用

    问题发生在CRM 4.0 上 1 用户所在办事处及办事处上级被禁用. 2 如果已经重新启用了,还是报这个错误. 可以把停用的办事处及相关下级再重新--停用--启用一次试试. 3 如果还是报错,查看是否 ...

  5. Linux后台有个systemd-r进程,占用5355等端口

    编辑配置文件 vim /etc/systemd/resolved.conf 设置LLMNR=0 重启服务: systemctl restart systemd-resolved.service

  6. What Your Computer Does While You Wait.CPU的等待有多久?

    原文标题:What Your Computer Does While You Wait 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高 ...

  7. fiddler--配置火狐代理配置代理

    fiddler安装 下载fiddler最新版: 默认安装: 配置火狐代理配置代理 打开fiddler 按图操作,复制选中的链接:fiddler -> tool ->connections ...

  8. Docker使用札记 - 常用命令

    1. 删除untagged的镜像(TAG列为<none>) docker images -f "dangling=true" -q|xargs docker rmi

  9. 图算法之——dijkstra算法

    一.算法特点 目标:找出加权图中前往X的最短路径 适用于:无环有向加权图,且各边的权值为正 二.算法思路 三.算法示例演示 如下图,请找出结点v1到其他各个结点的最短路径: 首先创建一个字典(散列表) ...

  10. Linux的用户

    添加用户 添加删除用户 # useradd user # passwd user Changing password for user user. New password: BAD PASSWORD ...