<!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. Java-Runoob-高级教程-实例-方法：05. Java 实例 – 阶乘

    ylbtech-Java-Runoob-高级教程-实例-方法:05. Java 实例 – 阶乘 1.返回顶部 1. Java 实例 - 阶乘  Java 实例 一个正整数的阶乘(英语:factoria ...

  2. Java-Runoob-高级教程-实例-时间处理：01. Java 实例 - 格式化时间（SimpleDateFormat）

    ylbtech-Java-Runoob-高级教程-实例-时间处理:01. Java 实例 - 格式化时间(SimpleDateFormat) 1.返回顶部 1. Java 实例 - 格式化时间(Sim ...

  3. SAS 数值转日期

    DATA _NULL_;FORMAT A YYMMDDN8.;B=PUT(20180101,$8.);A=INPUT(B,YYMMDD8.);PUT B= A=;RUN; 输出:47   DATA _ ...

  4. POJ 多项式加法

    题解: 采用顺序表.考虑到题目中没有规定指数上界,为避免RE,拟不采用数组.参考了http://blog.csdn.net/inlovecy/article/details/15208473后,最终采 ...

  5. 第10章 网络安全（4）_网络层安全IPSec

    5. 网络层安全IPSec 5.1 IPSec协议 (1)前面使用Outlook进行数字签名和数字加密是应用层实现的安全.安全套接字实现的安全是在应用层和传输层之间插入了一层来实现数据通信安全.而IP ...

  6. keras训练和保存

    https://cloud.tencent.com/developer/article/1010815 8.更科学地模型训练与模型保存 filepath = 'model-ep{epoch:03d}- ...

  7. delphi 获取webbrowser的cookies给Idhttp用

    网上方法一:(可获取,但不完全) 引用mshtml; IHTMLDocument(wb1.Document).cooke; 网上方法二:(获取不到!) 引用winnet,使用InternetGetCo ...

  8. Select模式和超时

    fd_set rset; FD_ZERO(&rset); int nready; int maxfd; int fd_stdin = fileno(stdin); if(fd_stdin &g ...

  9. Fragment重叠，使用show和hide控制显示和隐藏界面重叠问题；

    Fragment重叠原因: App因某种原因崩溃自动重启,或App长期在后台运行Fragment依赖的activity被回收等等原因:当系统内存不足,Fragment 的依附Activity 被回收的 ...

  10. Win10还原被Windows Defender隔离的文件

    Win10最新版本的Windows Defender隔离/删除的文件没有还原的选项,导致很多破解文件或是注册机直接隔离,到威胁历史记录中去却无法恢复.经过各个尝试,到微软官方论坛中也尝试了很多方法,后 ...