Css:

/*下拉菜单学习-2017.12.17 20:17 added by ldb*/

  ul{

    list-style-type:none;

    margin:;

    padding:;

    overflow:hidden;

    background-color:#333;

        /*固定在顶部*/

    /*position:fixed;

    top:0;

    width:100%;*/

  }

  li{

    float:left;

  }

  li a, .dropbtn

  {

    display:inline-block;

    color:white;

    text-align:center;

    padding:14px 16px;

    text-decoration:none;

  }

  li a:hover, .dropdown:hover .bropbtn/*/* 当下拉内容显示后修改下拉按钮的背景颜色 */

  {

    background-color:#111;

  }

  /* 容器 <div> - 需要定位下拉内容 */

.dropdown {

    /*position: relative;*/

    display: inline-block;

}

  .dropdown-content

  {

    display:none;

    position:absolute;

    background-color:#f9f9f9;

    min-width:160px;

    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);

  }

  /*下拉菜单内容样式*/

  .dropdown-content a

  {

    color:black;

    padding:12px 16px;

    text-decoration:none;

    display:block;

  }

  .dropdown-content a:hover {background-color: #f1f1f1}

  /*鼠标悬停在.dropdown元素上时，其下面的元素以块的样式展现出来*/

  .dropdown:hover .dropdown-content

  {

    display:block;

  }

Html:

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <script src="../Scripts/jquery-1.9.1.min.js"></script>@*应用自己下好的jQuery,也可以引用百度(src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js)或者微软CDN*@

    <link href="../Content/ldbCss.css" rel="stylesheet" type="text/css" /> @*stylesheet该句引入样式.css*@

    <link href="../Content/ButtonCss.css" rel="stylesheet" type="text/css" /> @*stylesheet该句引入样式.css*@

    <title>Index</title>

</head>

<body>

    <ul>

        <li><a href="#product">生产管理</a></li>

        <li><a href="#javascript()">工艺管理</a></li>

        <li><a href="#javascritp()">成品管理</a></li>

        <div class="dropdown">

            <li><a class="dropbtn" href="~/Views/Home/myHtmlCss.cshtml">进销存</a></li>

            <div class="dropdown-content">

                <a href="#">坯布</a>

                <a href="#">染化料</a>

                <a href="#">五金件</a>

            </div>

        </div>

        <li><a href="#">设置</a></li>

        <li><a href="#">联系</a></li>

        <li><a href="#">关于</a></li>

    </ul>

    <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">

        <h1>Fixed Top Navigation Bar(下拉菜单)</h1>

        <h2>Scroll this page to see the effect</h2>

        <h2>下拉菜单</h2>

    </div>

</body>

</html>

效果：

Css之导航栏下拉菜单的更多相关文章

  1. CSS：导航栏下拉菜单模板

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  2. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  3. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  4. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  5. 织梦DedeCMS v5.7 实现导航条下拉菜单

    首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...

  6. Bootstrap历练实例：导航内下拉菜单的用法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  8. 更改SharePoint 2010 顶部导航为下拉菜单样式

      更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...

  9. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

随机推荐

  1. [BZOJ1112] [POI2008] 砖块Klo (treap)

    Description N柱砖,希望有连续K柱的高度是一样的. 你可以选择以下两个动作 1:从某柱砖的顶端拿一块砖出来,丢掉不要了. 2:从仓库中拿出一块砖,放到另一柱.仓库无限大. 现在希望用最小次 ...

  2. Android视频直播：流媒体服务器搭建

    一.前言 实时视频直播是这两年非常火的技术形态,已经渗透到教育.在线互娱等各种业务场景中.但要搭建一套实时视频直播系统,并非易事,下面针对直播系统的的搭建做一下说明: 1.1 通常的直播系统的技术模型 ...

  3. 9.python异常处理

    常见异常 AttributeError 试图访问一个对象没有的树形,比如foo.x,但是foo没有属性x FileNotFoundError 输入/输出异常:基本上是无法打开文件 ImportErro ...

  4. Scala学习笔记（二）

    Scala面向对象: 类: 声明类(一个源文件中可以包含很多public的类) getter和setter 构造函数(主构造器和附属构造器) 继承(extends) 重写父类方法(override d ...

  5. H5页面基于接口实现数据交互

    对于现在APP开发来说,目前流行的两个方式是原生和H5.就如同之前业界程序猿争论的BS和CS之争一样,业界对于H5和原生也有不小的争论.对于前者的争论在于PC端,后者在于移动端上体现. 那一个APP适 ...

  6. css样式加载顺序

    css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...

  7. wifislax中的linset软件钓鱼教程

    wifislax中很多破解wifi密码的工具,下面就来说说里面的linset软件的钓鱼过程,国内很多人知道这个方法,不过没有总结,youtube上视频一大把,我刚才测试了一把,还是打算记录一下攻击过程 ...

  8. 软件质量与测试——WordCount编码实现及测试

    1.GitHub地址       https://github.com/noblegongzi/WordCount 2.PSP表格 PSP2.1 PSP 阶段 预估耗时 (分钟) 实际耗时 (分钟) ...

  9. nodejs-url网址解析的好帮手

    HTTP协议中url和uri的区别. 每个url都是uri,但是不是每个uri都是url. URI:是统一资源的标识符,web上可用的每种资源如HTML文档.图像.视频片段.程序等都是一个URI来定位 ...

  10. New Windows 10 SDK - Multi-instance UWP apps

    概述 前面一篇 About Windows 10 SDK Preview Build 17110 中,我们简单介绍了 Multi-instance UWP Apps,今天结合开发过程详细讲解一下. 在 ...