<!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. checked和stop()的讲解

    input:cheacked (属性选择器): checked 选中复选框 $("p").stop(ture); 代码的翻译:(参数)布尔值  p身上所有的动画都停止了 加不加tr ...

  2. DockerFile服务

    Dockerfile分为四部分:基础镜像信息.镜像创建者信息.镜像操作指令.容器启动执行指令. 一.Dockerfile的书写规则及指令使用方法 Dockerfile的指令是忽略大小写的,建议使用大写 ...

  3. eclipse调试的时候怎么后退？

    原文转载至:https://blog.csdn.net/qq_21262611/article/details/52121270 个人分类: myeclipse   前些天和同事交流调试技巧时,知道了 ...

  4. rabbitmq的vhost与用户管理(转)

    原文地址:https://blog.csdn.net/leisure_life/article/details/78707338 当我们在创建用户时,会指定用户能访问一个虚拟机,并且该用户只能访问该虚 ...

  5. UE4 材质Lerp节点解疑

    转自:http://www.manew.com/thread-46268-1-1.html 1.A是一个灰色,B是一个红色,Alpha是一个颜色图 A到B是0到1,也就是黑到白,所以,alpha图,黑 ...

  6. matplotlib基础知识全面解析

    图像基本知识: 通常情况下,我们可以将一副Matplotlib图像分成三层结构: 1.第一层是底层的容器层,主要包括Canvas.Figure.Axes: 2.第二层是辅助显示层,主要包括Axis.S ...

  7. lightgbm的sklearn接口和原生接口参数详细说明及调参指点

    class lightgbm.LGBMClassifier(boosting_type='gbdt', num_leaves=31, max_depth=-1, learning_rate=0.1, ...

  8. [电脑知识点]Excel取消受保护视图

  9. Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK. Looked here: C:\Users\Administrator\AppData\Local\Android\sdk\tools\templates\gradle\wrapper

    在Windows7上运行 “cordova build Android” 报错,如下: C:\test\hello> cordova build androidANDROID_HOME=C:\U ...

  10. Keras.applications.models权重：存储路径及加载

    网络中断原因导致keras加载vgg16等模型权重失败, 直接解决方法是:删掉下载文件,再重新下载 Windows-weights路径: C:\Users\你的用户名\.keras\models Li ...